,
- init(): void;
-}
-
-export type { AuthStore };
diff --git a/src/auth/hoc/withAuth.tsx b/src/auth/hoc/withAuth.tsx
deleted file mode 100644
index 242699f..0000000
--- a/src/auth/hoc/withAuth.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Libraries */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect } from "react";
-/* -------------------------------------------------------------------------- */
-/* Types */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Misc */
-/* -------------------------------------------------------------------------- */
-import { useAuthViewModel } from "auth/controller/useAuthViewModel";
-import { useAuthStore } from "auth/data/authSlice";
-/* -------------------------------------------------------------------------- */
-/* Helpers */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import AppLoader from "components/parts/Loader";
-import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
-import AuthFailure from "pages/AuthFailure";
-/* -------------------------------------------------------------------------- */
-/* Authentication logic HOC component */
-/* -------------------------------------------------------------------------- */
-
-const withAuth = (
- Component: React.ComponentType
,
- componentName = Component.displayName ?? Component.name
-): {
- (props: P): JSX.Element;
- displayName: string;
-} => {
- function WithAuthComponent(props: P) {
- const store = useAuthStore();
- const [searchParams] = useSearchParams();
- const navigate = useNavigate();
- const location = useLocation();
- const { init, isLoading, isFailed, isLogedIn, authenticate } =
- useAuthViewModel(store);
- const code = searchParams.get("code");
- useEffect(() => {
- if(isFailed) {
- return;
- }
- if (code) {
- authenticate(code);
- navigate(location.pathname, {
- replace: true,
- });
- return;
- }
- if (!isLogedIn) {
- init();
- navigate(location.pathname, {
- replace: true,
- });
- }
- }, [isFailed, isLogedIn, code, authenticate, init, navigate, location]);
-
- if (isLoading) {
- return ;
- }
-
- if (!isLogedIn) {
- return ;
- }
-
- return ;
- }
-
- WithAuthComponent.displayName = `withAuth(${componentName})`;
-
- return WithAuthComponent;
-};
-
-export { withAuth };
diff --git a/src/auth/useCases/authInitUseCase.ts b/src/auth/useCases/authInitUseCase.ts
deleted file mode 100644
index a88575f..0000000
--- a/src/auth/useCases/authInitUseCase.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { AuthStore } from "auth/domain/authStore";
-
-type AuthInitStore = Pick;
-
-const authInitUseCase = (store: AuthInitStore) => {
- store.init();
-}
-
-export {authInitUseCase};
\ No newline at end of file
diff --git a/src/auth/useCases/authenticationUseCase.ts b/src/auth/useCases/authenticationUseCase.ts
deleted file mode 100644
index 6ed7e63..0000000
--- a/src/auth/useCases/authenticationUseCase.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { AuthStore } from "auth/domain/authStore";
-
-type AuthenticationStore = Pick
-
-const authenticationUseCase = (store: AuthenticationStore, code: string) => {
- store.authenticate(code);
-};
-
-export { authenticationUseCase };
diff --git a/src/auth/useCases/signoutUseCase.ts b/src/auth/useCases/signoutUseCase.ts
deleted file mode 100644
index fdeb14a..0000000
--- a/src/auth/useCases/signoutUseCase.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { AuthStore } from "auth/domain/authStore";
-import { is } from "immer/dist/internal";
-
-type LogoutStore = Pick;
-
-const signOutUseCase = (store: LogoutStore) => {
- store.signOut();
-};
-
-export { signOutUseCase as signoutUseCase };
diff --git a/src/components/AcceptCookies.tsx b/src/components/AcceptCookies.tsx
old mode 100644
new mode 100755
index b2fc1dd..2c6301d
--- a/src/components/AcceptCookies.tsx
+++ b/src/components/AcceptCookies.tsx
@@ -1,41 +1,41 @@
-import React from "react";
-import { Button } from "./Button/Button";
-import Typography from "./typography/Typography";
-
-type AcceptCookiesProps = {
- onClickAccept?: () => void;
- onClickCustomise?: () => void;
-};
-
-export function AcceptCookies({
- onClickAccept,
- onClickCustomise,
-}: AcceptCookiesProps) {
- return (
-
-
-
- By clicking “Accept All Cookies”, you agree to the storing of cookies
- on your device to enhance site navigation, analyze site usage, and
- assist in our marketing efforts.
-
-
-
-
- Customize settings
-
-
- Accept all cookies
-
-
-
- );
-}
+import React from "react";
+import { Button } from "./Button/Button";
+import Typography from "./typography/Typography";
+
+type AcceptCookiesProps = {
+ onClickAccept?: () => void;
+ onClickCustomise?: () => void;
+};
+
+export function AcceptCookies({
+ onClickAccept,
+ onClickCustomise,
+}: AcceptCookiesProps) {
+ return (
+
+
+
+ By clicking “Accept All Cookies”, you agree to the storing of cookies
+ on your device to enhance site navigation, analyze site usage, and
+ assist in our marketing efforts.
+
+
+
+
+ Customize settings
+
+
+ Accept all cookies
+
+
+
+ );
+}
diff --git a/src/components/Article/Article.tsx b/src/components/Article/Article.tsx
old mode 100644
new mode 100755
index 9e10af2..e4fced7
--- a/src/components/Article/Article.tsx
+++ b/src/components/Article/Article.tsx
@@ -1,75 +1,75 @@
-import React, { useState } from "react";
-/* -------------------------------------------------------------------------- */
-/* imports Article parts */
-/* -------------------------------------------------------------------------- */
-import { ArticleTitle } from "./ArticleParts/ArticleTitle";
-import { ArticleBreadcumbs } from "./ArticleParts/ArticleBreadcumbs";
-import { ArticleAuthors } from "./ArticleParts/ArticleAuthors";
-import { ArticleKeywords } from "./ArticleParts/ArticleKeywords";
-import { ArticleInteractionButtons } from "./ArticleParts/ArticleInteractionButtons";
-import { ArticleDescription } from "./ArticleParts/ArticleDescription";
-import { ArticleSubscriptionsButtons } from "./ArticleParts/ArticleSubscriptionsButton";
-
-/**
- * Reduces a sequence of names to initials.
- * @param {String} name Space Delimited sequence of names.
- * @param {String} sep A period separating the initials.
- * @param {String} trail A period ending the initials.
- * @param {String} hyph A hypen separating double names.
- * @return {String} Properly formatted initials.
- */
-type ArticleTileExtentions = {
- Title?: {
- children?: string;
- className?: string;
- };
- Breadcumbs?: {
- children?: string[];
- highlightLAstChild?: boolean;
- };
- Authors?: {
- children: React.ReactNode;
- className?: string;
- emphasis?: "low" | "high";
- };
- Keywords?: {
- children?: React.ReactNode;
- className?: string;
- emphasis?: "low" | "high";
- };
- Description?: {
- children?: React.ReactNode;
- emphasis?: "low" | "high";
- isShowing?: boolean;
- };
- InteractionButtons?: {
- children?: React.ReactNode;
- className?: string;
- emphasis?: "high" | "low";
- };
- SubscriptionButtons?: {
- className?: string;
- };
-};
-
-type ArticleTileProps = {
- /** Description of prop "foo". */
- children?: React.ReactNode;
-};
-
-export function Article({
- /** Description of prop "foo". */
- children,
-}: ArticleTileProps & ArticleTileExtentions) {
- const [isShowing, setIsShowing] = useState(false);
-
- return {children}
;
-}
-
-Article.Title = ArticleTitle;
-Article.Breadcumbs = ArticleBreadcumbs;
-Article.Authors = ArticleAuthors;
-Article.Keywords = ArticleKeywords;
-Article.InteractionButtons = ArticleInteractionButtons;
-Article.Description = ArticleDescription;
-Article.SubscriptionsButtons = ArticleSubscriptionsButtons;
+import React, { useState } from "react";
+/* -------------------------------------------------------------------------- */
+/* imports Article parts */
+/* -------------------------------------------------------------------------- */
+import { ArticleTitle } from "./ArticleParts/ArticleTitle";
+import { ArticleBreadcumbs } from "./ArticleParts/ArticleBreadcumbs";
+import { ArticleAuthors } from "./ArticleParts/ArticleAuthors";
+import { ArticleKeywords } from "./ArticleParts/ArticleKeywords";
+import { ArticleInteractionButtons } from "./ArticleParts/ArticleInteractionButtons";
+import { ArticleDescription } from "./ArticleParts/ArticleDescription";
+import { ArticleSubscriptionsButtons } from "./ArticleParts/ArticleSubscriptionsButton";
+
+/**
+ * Reduces a sequence of names to initials.
+ * @param {String} name Space Delimited sequence of names.
+ * @param {String} sep A period separating the initials.
+ * @param {String} trail A period ending the initials.
+ * @param {String} hyph A hypen separating double names.
+ * @return {String} Properly formatted initials.
+ */
+type ArticleTileExtentions = {
+ Title?: {
+ children?: string;
+ className?: string;
+ };
+ Breadcumbs?: {
+ children?: string[];
+ highlightLAstChild?: boolean;
+ };
+ Authors?: {
+ children: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ };
+ Keywords?: {
+ children?: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ };
+ Description?: {
+ children?: React.ReactNode;
+ emphasis?: "low" | "high";
+ isShowing?: boolean;
+ };
+ InteractionButtons?: {
+ children?: React.ReactNode;
+ className?: string;
+ emphasis?: "high" | "low";
+ };
+ SubscriptionButtons?: {
+ className?: string;
+ };
+};
+
+type ArticleTileProps = {
+ /** Description of prop "foo". */
+ children?: React.ReactNode;
+};
+
+export function Article({
+ /** Description of prop "foo". */
+ children,
+}: ArticleTileProps & ArticleTileExtentions) {
+ const [isShowing, setIsShowing] = useState(false);
+
+ return {children}
;
+}
+
+Article.Title = ArticleTitle;
+Article.Breadcumbs = ArticleBreadcumbs;
+Article.Authors = ArticleAuthors;
+Article.Keywords = ArticleKeywords;
+Article.InteractionButtons = ArticleInteractionButtons;
+Article.Description = ArticleDescription;
+Article.SubscriptionsButtons = ArticleSubscriptionsButtons;
diff --git a/src/components/Article/ArticleParts/ArticleAuthors.tsx b/src/components/Article/ArticleParts/ArticleAuthors.tsx
old mode 100644
new mode 100755
index 5e2e16d..3b749b8
--- a/src/components/Article/ArticleParts/ArticleAuthors.tsx
+++ b/src/components/Article/ArticleParts/ArticleAuthors.tsx
@@ -1,53 +1,53 @@
-import React, { useMemo } from "react";
-import { RouterLink } from "components/typography/RouterLink";
-import Typography from "components/typography/Typography";
-import classNames from "classnames";
-import { SVGUser } from "components/icons";
-
-type AuthorsProps = {
- children: React.ReactNode;
- className?: string;
- emphasis?: "low" | "high";
- linkTo?: string;
-};
-
-export function ArticleAuthors({
- children,
-
- className,
- emphasis = "high",
- linkTo = "#",
-}: AuthorsProps) {
- const authors = React.Children.map(children, (author, i) => {
- return (
-
-
- {author}
- {i != React.Children.count(children) - 1 ? "," : null}
-
-
- );
- });
-
- return (
-
- );
-}
-
-ArticleAuthors.displayName = "ArticleAuthors";
+import React, { useMemo } from "react";
+import { RouterLink } from "components/typography/RouterLink";
+import Typography from "components/typography/Typography";
+import classNames from "classnames";
+import { SVGUser } from "components/icons";
+
+type AuthorsProps = {
+ children: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ linkTo?: string;
+};
+
+export function ArticleAuthors({
+ children,
+
+ className,
+ emphasis = "high",
+ linkTo = "#",
+}: AuthorsProps) {
+ const authors = React.Children.map(children, (author, i) => {
+ return (
+
+
+ {author}
+ {i != React.Children.count(children) - 1 ? "," : null}
+
+
+ );
+ });
+
+ return (
+
+ );
+}
+
+ArticleAuthors.displayName = "ArticleAuthors";
diff --git a/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx b/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx
old mode 100644
new mode 100755
index e52881e..90e63af
--- a/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx
+++ b/src/components/Article/ArticleParts/ArticleBreadcumbs.tsx
@@ -1,31 +1,31 @@
-import React from "react";
-import Breadcrumbs from "components/breadcrumbs";
-import Logo from "components/Logo";
-import classNames from "classnames";
-
-type ArticleBreadcumbsProps = {
- emphasis?: "high" | "low";
- children?: string[];
-};
-
-export function ArticleBreadcumbs({
- children,
- emphasis = "high", //Emphasis high uses when we display article page
-}: ArticleBreadcumbsProps) {
- return (
-
- {emphasis === "high" ? : null}
- {children}
-
- );
-}
-
-ArticleBreadcumbs.displayName = "ArticleBreadcumbs";
+import React from "react";
+import Breadcrumbs from "components/breadcrumbs";
+import Logo from "components/Logo";
+import classNames from "classnames";
+
+type ArticleBreadcumbsProps = {
+ emphasis?: "high" | "low";
+ children?: string[];
+};
+
+export function ArticleBreadcumbs({
+ children,
+ emphasis = "high", //Emphasis high uses when we display article page
+}: ArticleBreadcumbsProps) {
+ return (
+
+ {emphasis === "high" ? : null}
+ {children}
+
+ );
+}
+
+ArticleBreadcumbs.displayName = "ArticleBreadcumbs";
diff --git a/src/components/Article/ArticleParts/ArticleDescription.tsx b/src/components/Article/ArticleParts/ArticleDescription.tsx
old mode 100644
new mode 100755
index 119241d..c3b5cb5
--- a/src/components/Article/ArticleParts/ArticleDescription.tsx
+++ b/src/components/Article/ArticleParts/ArticleDescription.tsx
@@ -1,38 +1,38 @@
-import React from "react";
-import Typography from "components/typography/Typography";
-import { Transition } from "@headlessui/react";
-
-type ArticleDescriptionProps = {
- children?: React.ReactNode;
- emphasis?: "low" | "high";
- isShowing?: boolean;
-};
-
-export function ArticleDescription({
- children,
- emphasis = "high",
- isShowing = false,
-}: ArticleDescriptionProps) {
- return emphasis === "low" ? (
-
-
- {children}
-
-
- ) : (
-
- {children}
-
- );
-}
-
-ArticleDescription.displayName = "ArticleDescription";
+import React from "react";
+import Typography from "components/typography/Typography";
+import { Transition } from "@headlessui/react";
+
+type ArticleDescriptionProps = {
+ children?: React.ReactNode;
+ emphasis?: "low" | "high";
+ isShowing?: boolean;
+};
+
+export function ArticleDescription({
+ children,
+ emphasis = "high",
+ isShowing = false,
+}: ArticleDescriptionProps) {
+ return emphasis === "low" ? (
+
+
+ {children}
+
+
+ ) : (
+
+ {children}
+
+ );
+}
+
+ArticleDescription.displayName = "ArticleDescription";
diff --git a/src/components/Article/ArticleParts/ArticleInteractionButtons.tsx b/src/components/Article/ArticleParts/ArticleInteractionButtons.tsx
old mode 100644
new mode 100755
index ef69869..5460cca
--- a/src/components/Article/ArticleParts/ArticleInteractionButtons.tsx
+++ b/src/components/Article/ArticleParts/ArticleInteractionButtons.tsx
@@ -1,87 +1,87 @@
-import React from "react";
-import { Button } from "components/Button/Button";
-import Typography from "components/typography/Typography";
-import {
- SVGArrowDown,
- SVGArrowUp,
- SVGCite,
- SVGFiletext,
- SVGDownload,
- SVGShare,
- SVGFolder,
-} from "components/icons";
-import classNames from "classnames";
-
-const interactionButtonsStore = [
- {
- icon: ,
- title: "Read file",
- buttonEmphasis: "high",
- iconClassName: "h-6 fill-white stroke-white",
- },
- {
- icon: ,
- title: "Download",
- buttonEmphasis: "low",
- iconClassName: "w-6 fill-gray-900 stroke-gray-900",
- },
- {
- icon: ,
- title: "Cite",
- buttonEmphasis: "low",
- iconClassName: "w-6 fill-gray-900 stroke-gray-900",
- },
- {
- icon: ,
- title: "Share",
- buttonEmphasis: "low",
- iconClassName: "w-6 fill-gray-900 stroke-gray-900",
- },
-];
-
-type ArticleButtonProps = {
- children?: React.ReactNode;
- className?: string;
- emphasis?: "high" | "low";
-} & Omit, "">;
-
-export function ArticleInteractionButtons({
- children,
- className,
- emphasis, //to change displaying of component
- ...props
-}: ArticleButtonProps) {
- const abstractButton = (
-
-
- Abstract
-
-
-
-
-
- );
-
- const fileInteractionButtons = interactionButtonsStore.map((button) => {
- return (
-
-
- {React.cloneElement(button.icon, { className: button.iconClassName })}
-
- {emphasis === "high" ? {button.title} : null}
-
- );
- });
-
- return (
-
- {emphasis === "low" && !children ? abstractButton : null}
- {children ? children : fileInteractionButtons}
-
- );
-}
-
-ArticleInteractionButtons.displayName = "ArticleInteractionButtons";
+import React from "react";
+import { Button } from "components/Button/Button";
+import Typography from "components/typography/Typography";
+import {
+ SVGArrowDown,
+ SVGArrowUp,
+ SVGCite,
+ SVGFiletext,
+ SVGDownload,
+ SVGShare,
+ SVGFolder,
+} from "components/icons";
+import classNames from "classnames";
+
+const interactionButtonsStore = [
+ {
+ icon: ,
+ title: "Read file",
+ buttonEmphasis: "high",
+ iconClassName: "h-6 fill-white stroke-white",
+ },
+ {
+ icon: ,
+ title: "Download",
+ buttonEmphasis: "low",
+ iconClassName: "w-6 fill-gray-900 stroke-gray-900",
+ },
+ {
+ icon: ,
+ title: "Cite",
+ buttonEmphasis: "low",
+ iconClassName: "w-6 fill-gray-900 stroke-gray-900",
+ },
+ {
+ icon: ,
+ title: "Share",
+ buttonEmphasis: "low",
+ iconClassName: "w-6 fill-gray-900 stroke-gray-900",
+ },
+];
+
+type ArticleButtonProps = {
+ children?: React.ReactNode;
+ className?: string;
+ emphasis?: "high" | "low";
+} & Omit, "">;
+
+export function ArticleInteractionButtons({
+ children,
+ className,
+ emphasis, //to change displaying of component
+ ...props
+}: ArticleButtonProps) {
+ const abstractButton = (
+
+
+ Abstract
+
+
+
+
+
+ );
+
+ const fileInteractionButtons = interactionButtonsStore.map((button) => {
+ return (
+
+
+ {React.cloneElement(button.icon, { className: button.iconClassName })}
+
+ {emphasis === "high" ? {button.title} : null}
+
+ );
+ });
+
+ return (
+
+ {emphasis === "low" && !children ? abstractButton : null}
+ {children ? children : fileInteractionButtons}
+
+ );
+}
+
+ArticleInteractionButtons.displayName = "ArticleInteractionButtons";
diff --git a/src/components/Article/ArticleParts/ArticleKeywords.tsx b/src/components/Article/ArticleParts/ArticleKeywords.tsx
old mode 100644
new mode 100755
index 01b5546..0cf7e7e
--- a/src/components/Article/ArticleParts/ArticleKeywords.tsx
+++ b/src/components/Article/ArticleParts/ArticleKeywords.tsx
@@ -1,55 +1,55 @@
-import React from "react";
-import Typography from "components/typography/Typography";
-import { SVGKey } from "components/icons";
-import { RouterLink } from "components/typography/RouterLink";
-import classNames from "classnames";
-
-type KeywordsProps = {
- children?: React.ReactNode;
- className?: string;
- emphasis?: "low" | "high";
- linkTo?: string;
-};
-
-export function ArticleKeywords({
- children,
- className,
- emphasis = "high",
- linkTo = "#",
-}: KeywordsProps) {
- const keywords = React.Children.map(children, (keyword, i) => {
- return (
-
-
-
- {keyword}
- {i != React.Children.count(children) - 1 && emphasis === "low"
- ? ","
- : null}
-
-
-
- );
- });
- return (
-
- {emphasis === "low" ? (
-
- ) : null}
-
{keywords}
-
- );
-}
-
-ArticleKeywords.displayName = "ArticleKeywords";
+import React from "react";
+import Typography from "components/typography/Typography";
+import { SVGKey } from "components/icons";
+import { RouterLink } from "components/typography/RouterLink";
+import classNames from "classnames";
+
+type KeywordsProps = {
+ children?: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ linkTo?: string;
+};
+
+export function ArticleKeywords({
+ children,
+ className,
+ emphasis = "high",
+ linkTo = "#",
+}: KeywordsProps) {
+ const keywords = React.Children.map(children, (keyword, i) => {
+ return (
+
+
+
+ {keyword}
+ {i != React.Children.count(children) - 1 && emphasis === "low"
+ ? ","
+ : null}
+
+
+
+ );
+ });
+ return (
+
+ {emphasis === "low" ? (
+
+ ) : null}
+
{keywords}
+
+ );
+}
+
+ArticleKeywords.displayName = "ArticleKeywords";
diff --git a/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx b/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
old mode 100644
new mode 100755
index ad6dd09..24c9c8b
--- a/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
+++ b/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
@@ -1,39 +1,39 @@
-import React, { useState } from "react";
-import { Button } from "components/Button/Button";
-import {
- SVGFavoriteFilled,
- SVGFavoriteOutlined,
- SVGFolder,
-} from "components/icons";
-
-const subscriptionStyles = "fill-gray-500 stroke-gray-500 w-6";
-
-type ArticleSubscriptionsButtonsProps = {
- className?: string;
- favorite?: boolean;
- //Todo create tracking subscriptions and onClick props
-} & Omit, "">;
-
-export function ArticleSubscriptionsButtons({
- className,
- favorite = false,
-}: ArticleSubscriptionsButtonsProps) {
- return (
-
-
-
-
-
-
- {}}>
-
- {!favorite ? (
-
- ) : (
-
- )}
-
-
-
- );
-}
+import React, { useState } from "react";
+import { Button } from "components/Button/Button";
+import {
+ SVGFavoriteFilled,
+ SVGFavoriteOutlined,
+ SVGFolder,
+} from "components/icons";
+
+const subscriptionStyles = "fill-gray-500 stroke-gray-500 w-6";
+
+type ArticleSubscriptionsButtonsProps = {
+ className?: string;
+ favorite?: boolean;
+ //Todo create tracking subscriptions and onClick props
+} & Omit, "">;
+
+export function ArticleSubscriptionsButtons({
+ className,
+ favorite = false,
+}: ArticleSubscriptionsButtonsProps) {
+ return (
+
+
+
+
+
+
+ {}}>
+
+ {!favorite ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/Article/ArticleParts/ArticleTitle.tsx b/src/components/Article/ArticleParts/ArticleTitle.tsx
old mode 100644
new mode 100755
index 7a5ae89..939d848
--- a/src/components/Article/ArticleParts/ArticleTitle.tsx
+++ b/src/components/Article/ArticleParts/ArticleTitle.tsx
@@ -1,24 +1,24 @@
-import React from "react";
-import Typography from "components/typography/Typography";
-import { RouterLink } from "components/typography/RouterLink";
-type ArticleTitleProps = {
- className?: string;
- children?: string;
- linkTo?: string;
-};
-
-export function ArticleTitle({
- className,
- children,
- linkTo = "#",
-}: ArticleTitleProps) {
- return (
-
-
- {children}
-
-
- );
-}
-
-ArticleTitle.displayName = "ArticleTitle";
+import React from "react";
+import Typography from "components/typography/Typography";
+import { RouterLink } from "components/typography/RouterLink";
+type ArticleTitleProps = {
+ className?: string;
+ children?: string;
+ linkTo?: string;
+};
+
+export function ArticleTitle({
+ className,
+ children,
+ linkTo = "#",
+}: ArticleTitleProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+ArticleTitle.displayName = "ArticleTitle";
diff --git a/src/components/Article/ArticleSearch.tsx b/src/components/Article/ArticleSearch.tsx
old mode 100644
new mode 100755
index 8b0e397..7326ebd
--- a/src/components/Article/ArticleSearch.tsx
+++ b/src/components/Article/ArticleSearch.tsx
@@ -1,45 +1,45 @@
-import React from "react";
-import { Article } from "./Article";
-
-export function ArticleSearch() {
- return (
-
-
-
- {["Yoda", "Lallalla", "Maxim"]}
-
-
-
-
-
-
- {["Reavap", "aldjfoa", "dkfjaoif"]}
-
-
- {["porn", "development", "frontend"]}
-
-
-
- low
-
-
- {" "}
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quidem
- provident temporibus! Fuga dolores placeat at voluptatem quia, vero
- molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
- quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
- vero molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
- quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
- vero molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
- quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
- vero molestiae animi et itaque a, officia ullam expedita temporibus cum
- deserunt.
-
-
- );
-}
+import React from "react";
+import { Article } from "./Article";
+
+export function ArticleSearch() {
+ return (
+
+
+
+ {["Yoda", "Lallalla", "Maxim"]}
+
+
+
+
+
+
+ {["Reavap", "aldjfoa", "dkfjaoif"]}
+
+
+ {["porn", "development", "frontend"]}
+
+
+
+ low
+
+
+ {" "}
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quidem
+ provident temporibus! Fuga dolores placeat at voluptatem quia, vero
+ molestiae animi et itaque a, officia ullam expedita temporibus cum
+ deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
+ quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
+ vero molestiae animi et itaque a, officia ullam expedita temporibus cum
+ deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
+ quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
+ vero molestiae animi et itaque a, officia ullam expedita temporibus cum
+ deserunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
+ quidem provident temporibus! Fuga dolores placeat at voluptatem quia,
+ vero molestiae animi et itaque a, officia ullam expedita temporibus cum
+ deserunt.
+
+
+ );
+}
diff --git a/src/components/AspectRatio.tsx b/src/components/AspectRatio.tsx
old mode 100644
new mode 100755
index be6a1b8..ba3f290
--- a/src/components/AspectRatio.tsx
+++ b/src/components/AspectRatio.tsx
@@ -1,38 +1,38 @@
-import classNames from "classnames";
-import React from "react";
-
-export type Props = {
- /**
- * The style of component
- */
- className?: string;
- /**
- * The optional child
- */
- children?: React.ReactNode;
-};
-const AspectRatio = ({ className, children }: Props) => {
- return (
-
- {children}
-
- );
-};
-
-AspectRatio.Content = function AspectRatioContent({
- className,
- children,
-}: Props) {
- return (
-
- {children}
-
- );
-};
-
-export default AspectRatio;
+import classNames from "classnames";
+import React from "react";
+
+export type Props = {
+ /**
+ * The style of component
+ */
+ className?: string;
+ /**
+ * The optional child
+ */
+ children?: React.ReactNode;
+};
+const AspectRatio = ({ className, children }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+ className,
+ children,
+}: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+export default AspectRatio;
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
old mode 100644
new mode 100755
index 7678fce..7de6456
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,83 +1,83 @@
-import classNames from "classnames";
-import React from "react";
-
-export type Props = {
- /**
- * The style avatar
- */
- className?: string;
- /**
- * The path of image
- */
- src?: string;
- /**
- * The alternative text in case the image is not valid
- */
- alt?: string;
- /**
- * The text inside avatar as a child
- */
- children?: React.ReactNode;
-};
-
-// Choosing random color for the avatar background
-function getRandomInt(max: number) {
- return Math.floor(Math.random() * max);
-}
-let colors: string[] = [
- "bg-red-400",
- "bg-orange-400",
- "bg-green-400",
- "bg-amber-400",
- "bg-yellow-400",
- "bg-lime-400",
- "bg-emerald-400",
- "bg-teal-400",
- "bg-cyan-400",
- "bg-sky-400",
- "bg-blue-400",
- "bg-indigo-400",
- "bg-violet-400",
- "bg-purple-400",
- "bg-fuchsia-400",
-];
-
-const Avatar = ({ className, src, alt, children }: Props) => {
- const wrapperClasses = src ? "" : colors[getRandomInt(colors.length)];
- const position = src ? "relative pt-[100%]" : "";
- return (
-
- {/* In case the src is valid, it will show the image */}
- {src && (
-
- )}
- {/* The text will be shown in case it is valid */}
- {children && (
-
- {children}
-
- )}
-
- );
-};
-
-export default Avatar;
+import classNames from "classnames";
+import React from "react";
+
+export type Props = {
+ /**
+ * The style avatar
+ */
+ className?: string;
+ /**
+ * The path of image
+ */
+ src?: string;
+ /**
+ * The alternative text in case the image is not valid
+ */
+ alt?: string;
+ /**
+ * The text inside avatar as a child
+ */
+ children?: React.ReactNode;
+};
+
+// Choosing random color for the avatar background
+function getRandomInt(max: number) {
+ return Math.floor(Math.random() * max);
+}
+let colors: string[] = [
+ "bg-red-400",
+ "bg-orange-400",
+ "bg-green-400",
+ "bg-amber-400",
+ "bg-yellow-400",
+ "bg-lime-400",
+ "bg-emerald-400",
+ "bg-teal-400",
+ "bg-cyan-400",
+ "bg-sky-400",
+ "bg-blue-400",
+ "bg-indigo-400",
+ "bg-violet-400",
+ "bg-purple-400",
+ "bg-fuchsia-400",
+];
+
+const Avatar = ({ className, src, alt, children }: Props) => {
+ const wrapperClasses = src ? "" : colors[getRandomInt(colors.length)];
+ const position = src ? "relative pt-[100%]" : "";
+ return (
+
+ {/* In case the src is valid, it will show the image */}
+ {src && (
+
+ )}
+ {/* The text will be shown in case it is valid */}
+ {children && (
+
+ {children}
+
+ )}
+
+ );
+};
+
+export default Avatar;
diff --git a/src/components/Badge.stories.tsx b/src/components/Badge.stories.tsx
old mode 100644
new mode 100755
index f952327..f5ecb4a
--- a/src/components/Badge.stories.tsx
+++ b/src/components/Badge.stories.tsx
@@ -1,30 +1,30 @@
-import React, { Children } from "react";
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Badge from "./Badge";
-
-
-
-export default{
- title: 'Badge',
- component: Badge,
-} as ComponentMeta;
-
-const Template: ComponentStory = (args) => ;
-
-export const High = Template.bind({});
-High.args = {
- emphasis: 'high',
- children: ['Tom Cook'],
-};
-
-export const Medium = Template.bind({});
-Medium.args = {
- emphasis: 'medium',
- children: ['Tanya Fox'],
-};
-
-export const Low = Template.bind({});
-Low.args = {
- emphasis:'low',
- children:['Hellen Schmidt'],
+import React, { Children } from "react";
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Badge from "./Badge";
+
+
+
+export default{
+ title: 'Badge',
+ component: Badge,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+export const High = Template.bind({});
+High.args = {
+ emphasis: 'high',
+ children: ['Tom Cook'],
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+ emphasis: 'medium',
+ children: ['Tanya Fox'],
+};
+
+export const Low = Template.bind({});
+Low.args = {
+ emphasis:'low',
+ children:['Hellen Schmidt'],
};
\ No newline at end of file
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
old mode 100644
new mode 100755
index f74404a..34974eb
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,51 +1,51 @@
-/* -------------------------------------------------------------------------- */
-/* Imports */
-/* -------------------------------------------------------------------------- */
-
-import classNames from "classnames";
-import { StyleType } from "core/_variants";
-import React from "react";
-
-/* -------------------------------------------------------------------------- */
-/* Component props */
-/* -------------------------------------------------------------------------- */
-
-type Props = {
- emphasis?: StyleType;
- children: React.ReactNode;
- className?: string;
- iconed?: boolean;
- onClick?: () => void;
-} & Omit, "">;
-
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-
-function Badge({
- className,
- children,
- onClick,
- emphasis = "low",
- ...props
-}: Props): JSX.Element {
- return (
-
- {children}
-
- );
-}
-export default Badge;
+/* -------------------------------------------------------------------------- */
+/* Imports */
+/* -------------------------------------------------------------------------- */
+
+import classNames from "classnames";
+import { StyleType } from "core/_variants";
+import React from "react";
+
+/* -------------------------------------------------------------------------- */
+/* Component props */
+/* -------------------------------------------------------------------------- */
+
+type Props = {
+ emphasis?: StyleType;
+ children: React.ReactNode;
+ className?: string;
+ iconed?: boolean;
+ onClick?: () => void;
+} & Omit, "">;
+
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+
+function Badge({
+ className,
+ children,
+ onClick,
+ emphasis = "low",
+ ...props
+}: Props): JSX.Element {
+ return (
+
+ {children}
+
+ );
+}
+export default Badge;
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
old mode 100644
new mode 100755
index 2c143c9..033079c
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -1,23 +1,23 @@
-import React from "react";
-import { Footer } from "./parts/Footer";
-import Header from "./parts/Header";
-type Props = {
- header?: React.ReactElement;
- children: React.ReactNode;
- footer?: React.ReactElement;
- className?: string;
-};
-
-function BaseLayout({ header, footer, children, className }: Props) {
- return (
-
-
-
- {children}
-
-
-
- );
-}
-
-export default BaseLayout;
+import React from "react";
+import { Footer } from "./parts/Footer";
+import Header from "./parts/Header";
+type Props = {
+ header?: React.ReactElement;
+ children: React.ReactNode;
+ footer?: React.ReactElement;
+ className?: string;
+};
+
+function BaseLayout({ header, footer, children, className }: Props) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+export default BaseLayout;
diff --git a/src/components/BottomSheetBar.tsx b/src/components/BottomSheetBar.tsx
old mode 100644
new mode 100755
index 6e25743..03e7f61
--- a/src/components/BottomSheetBar.tsx
+++ b/src/components/BottomSheetBar.tsx
@@ -1,58 +1,58 @@
-import { useState } from "react";
-import { Dialog } from "@headlessui/react";
-import { Button } from "./Button/Button";
-import Typography from "components/typography/Typography";
-
-export function BottomSheetBar() {
- // The open/closed state lives outside of the Dialog and is managed by you
- let [isOpen, setIsOpen] = useState(true);
-
- function handleDeactivate() {
- alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
- }
-
- return (
- /*
- Pass `isOpen` to the `open` prop, and use `onClose` to set
- the state back to `false` when the user clicks outside of
- the dialog or presses the escape key.
- */
- {}}
- className="absolute bottom-0 bg-blue-900 text-white w-full"
- >
-
-
- By clicking “Accept All Cookies”, you agree to the storing of cookies
- on your device to enhance site navigation, analyze site usage, and
- assist in our marketing efforts.
-
- {/*
- You can render additional buttons to dismiss your dialog by setting
- `isOpen` to `false`.
- */}
-
-
-
- Customize settings
-
-
- setIsOpen(false)}
- >
-
- Accept all cookies
-
-
-
-
-
- );
-}
+import { useState } from "react";
+import { Dialog } from "@headlessui/react";
+import { Button } from "./Button/Button";
+import Typography from "components/typography/Typography";
+
+export function BottomSheetBar() {
+ // The open/closed state lives outside of the Dialog and is managed by you
+ let [isOpen, setIsOpen] = useState(true);
+
+ function handleDeactivate() {
+ alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
+ }
+
+ return (
+ /*
+ Pass `isOpen` to the `open` prop, and use `onClose` to set
+ the state back to `false` when the user clicks outside of
+ the dialog or presses the escape key.
+ */
+ {}}
+ className="absolute bottom-0 bg-blue-900 text-white w-full"
+ >
+
+
+ By clicking “Accept All Cookies”, you agree to the storing of cookies
+ on your device to enhance site navigation, analyze site usage, and
+ assist in our marketing efforts.
+
+ {/*
+ You can render additional buttons to dismiss your dialog by setting
+ `isOpen` to `false`.
+ */}
+
+
+
+ Customize settings
+
+
+ setIsOpen(false)}
+ >
+
+ Accept all cookies
+
+
+
+
+
+ );
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
old mode 100644
new mode 100755
index 474d8e3..36b3b8c
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,92 +1,92 @@
-/* -------------------------------------------------------------------------- */
-/* Imports */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import classNames from "classnames";
-import { StyleType } from "core/_variants";
-import * as btnEmphasis from "./_btnEmphasis";
-import IconButton from "./IconButton";
-
-/* -------------------------------------------------------------------------- */
-/* Extention for component */
-/* -------------------------------------------------------------------------- */
-
-type ButtonExtentions = {
- Icon: React.FC<{
- children: Required;
- className?: string;
- }>;
-};
-
-/* -------------------------------------------------------------------------- */
-/* Component props */
-/* -------------------------------------------------------------------------- */
-type ButtonProps = {
- defaultStyle?: boolean;
- emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
- disabled?: boolean;
-} & Omit, "">;
-
-/* -------------------------------------------------------------------------- */
-/* Component implementation */
-/* -------------------------------------------------------------------------- */
-export const Button: React.FC & ButtonExtentions = ({
- defaultStyle = true,
- emphasis = "high",
- disabled = false,
- className,
- children,
- ...props
-}) => {
- const isOnlyIcon =
- children &&
- React.isValidElement(children) &&
- React.Children.only(children).type == IconButton;
-
- const padding = isOnlyIcon ? "px-2.5 py-2" : "px-4 py-2";
-
- return (
- {} : undefined}
- className={classNames([
- "flex content-center justify-between",
- "text-center",
- padding,
- "rounded",
- {
- "!cursor-default": disabled,
- "transition-all": !disabled,
- "transition duration-200": !disabled,
- },
- {
- // Define high emphasis
- [`${btnEmphasis.EnableHigh}`]:
- defaultStyle && !disabled && emphasis === "high",
- [`${btnEmphasis.DisabledHigh}`]:
- defaultStyle && disabled && emphasis === "high",
- [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
- // Define medium emphasis
- [`${btnEmphasis.EnabledMedium}`]:
- defaultStyle && !disabled && emphasis === "medium",
- [`${btnEmphasis.DisabledMedium}`]:
- defaultStyle && disabled && emphasis === "medium",
- [`${btnEmphasis.GeneralMedium}`]:
- defaultStyle && emphasis === "medium",
- // Define low emphasis
- [`${btnEmphasis.EnabledLow}`]:
- defaultStyle && !disabled && emphasis === "low",
- [`${btnEmphasis.DisabledLow}`]:
- defaultStyle && disabled && emphasis === "low",
- [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
- },
- className,
- ])}
- {...props}
- >
- {children}
-
- );
-};
-
-Button.Icon = IconButton;
+/* -------------------------------------------------------------------------- */
+/* Imports */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import classNames from "classnames";
+import { StyleType } from "core/_variants";
+import * as btnEmphasis from "./_btnEmphasis";
+import IconButton from "./IconButton";
+
+/* -------------------------------------------------------------------------- */
+/* Extention for component */
+/* -------------------------------------------------------------------------- */
+
+type ButtonExtentions = {
+ Icon: React.FC<{
+ children: Required;
+ className?: string;
+ }>;
+};
+
+/* -------------------------------------------------------------------------- */
+/* Component props */
+/* -------------------------------------------------------------------------- */
+type ButtonProps = {
+ defaultStyle?: boolean;
+ emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
+ disabled?: boolean;
+} & Omit, "">;
+
+/* -------------------------------------------------------------------------- */
+/* Component implementation */
+/* -------------------------------------------------------------------------- */
+export const Button: React.FC & ButtonExtentions = ({
+ defaultStyle = true,
+ emphasis = "high",
+ disabled = false,
+ className,
+ children,
+ ...props
+}) => {
+ const isOnlyIcon =
+ children &&
+ React.isValidElement(children) &&
+ React.Children.only(children).type == IconButton;
+
+ const padding = isOnlyIcon ? "px-2.5 py-2" : "px-4 py-2";
+
+ return (
+ {} : undefined}
+ className={classNames([
+ "flex content-center justify-between",
+ "text-center",
+ padding,
+ "rounded",
+ {
+ "!cursor-default": disabled,
+ "transition-all": !disabled,
+ "transition duration-200": !disabled,
+ },
+ {
+ // Define high emphasis
+ [`${btnEmphasis.EnableHigh}`]:
+ defaultStyle && !disabled && emphasis === "high",
+ [`${btnEmphasis.DisabledHigh}`]:
+ defaultStyle && disabled && emphasis === "high",
+ [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
+ // Define medium emphasis
+ [`${btnEmphasis.EnabledMedium}`]:
+ defaultStyle && !disabled && emphasis === "medium",
+ [`${btnEmphasis.DisabledMedium}`]:
+ defaultStyle && disabled && emphasis === "medium",
+ [`${btnEmphasis.GeneralMedium}`]:
+ defaultStyle && emphasis === "medium",
+ // Define low emphasis
+ [`${btnEmphasis.EnabledLow}`]:
+ defaultStyle && !disabled && emphasis === "low",
+ [`${btnEmphasis.DisabledLow}`]:
+ defaultStyle && disabled && emphasis === "low",
+ [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
+ },
+ className,
+ ])}
+ {...props}
+ >
+ {children}
+
+ );
+};
+
+Button.Icon = IconButton;
diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
old mode 100644
new mode 100755
index ac44982..09c7ae4
--- a/src/components/Button/IconButton.tsx
+++ b/src/components/Button/IconButton.tsx
@@ -1,21 +1,21 @@
-import classNames from "classnames";
-import React, { FunctionComponent as FC } from "react";
-import { SVGSearch } from "../icons";
-
-type IconButtonProps = {
- children: Required;
- className?: string;
-} & Omit, "">;
-
-const IconButton: React.FC = ({
- children,
- className,
-}): JSX.Element => {
- return className
- ? React.cloneElement(children, {
- className: classNames(className),
- })
- : children;
-};
-IconButton.displayName = "ButtonIcon";
-export default IconButton;
+import classNames from "classnames";
+import React, { FunctionComponent as FC } from "react";
+import { SVGSearch } from "../icons";
+
+type IconButtonProps = {
+ children: Required;
+ className?: string;
+} & Omit, "">;
+
+const IconButton: React.FC = ({
+ children,
+ className,
+}): JSX.Element => {
+ return className
+ ? React.cloneElement(children, {
+ className: classNames(className),
+ })
+ : children;
+};
+IconButton.displayName = "ButtonIcon";
+export default IconButton;
diff --git a/src/components/Button/_btnEmphasis.tsx b/src/components/Button/_btnEmphasis.tsx
old mode 100644
new mode 100755
index 37422e6..cbb43b8
--- a/src/components/Button/_btnEmphasis.tsx
+++ b/src/components/Button/_btnEmphasis.tsx
@@ -1,65 +1,65 @@
-/* -------------------------------------------------------------------------- */
-/* styles */
-/* -------------------------------------------------------------------------- */
-
-export const EnableHigh = `bg-blue-600
- hover:bg-blue-500
- active:bg-blue-700
- focus:shadow-lg shadow-blue-500
- focus:outline outline-blue-400/10 outline-8
-`;
-
-export const DisabledHigh = `bg-gray-200
- focus:outline-none`;
-
-export const GeneralHigh = `
- text-white
- fill-white
- stroke-white
- `;
-
-export const EnabledMedium = `text-blue-600
- border-gray-500
- active:border-blue-700
- active:text-blue-700
- hover:border-blue-500
- hover:text-blue-500
- focus:outline outline-blue-400/10 outline-8
- focus:border-blue-700/70
- fill-blue-600
- hover:fill-blue-500
- active:fill-blue-700
- focus:fill-blue-700
- stroke-blue-600
- hover:stroke-blue-500
- active:stroke-blue-700
- focus:stroke-blue-700
-`;
-
-export const DisabledMedium = `text-gray-200
- border-gray-200
- fill-gray-200
- stroke-gray-200
- focus:outline-none`;
-
-export const GeneralMedium = `bg-white
- border`;
-
-export const EnabledLow = ` text-gray-900
- hover:bg-gray-100
- active:text-blue-700
- active:bg-blue-100
- focus:bg-blue-100
- fill-gray-900
- stroke-gray-900
- active:fill-blue-600
- active:stroke-blue-600
- `;
-
-export const DisabledLow = `text-gray-200
- fill-gray-200
- stroke-gray-200`;
-
-export const GenerealLow = `focus:outline-none
- bg-transparent
-`;
+/* -------------------------------------------------------------------------- */
+/* styles */
+/* -------------------------------------------------------------------------- */
+
+export const EnableHigh = `bg-blue-600
+ hover:bg-blue-500
+ active:bg-blue-700
+ focus:shadow-lg shadow-blue-500
+ focus:outline outline-blue-400/10 outline-8
+`;
+
+export const DisabledHigh = `bg-gray-200
+ focus:outline-none`;
+
+export const GeneralHigh = `
+ text-white
+ fill-white
+ stroke-white
+ `;
+
+export const EnabledMedium = `text-blue-600
+ border-gray-500
+ active:border-blue-700
+ active:text-blue-700
+ hover:border-blue-500
+ hover:text-blue-500
+ focus:outline outline-blue-400/10 outline-8
+ focus:border-blue-700/70
+ fill-blue-600
+ hover:fill-blue-500
+ active:fill-blue-700
+ focus:fill-blue-700
+ stroke-blue-600
+ hover:stroke-blue-500
+ active:stroke-blue-700
+ focus:stroke-blue-700
+`;
+
+export const DisabledMedium = `text-gray-200
+ border-gray-200
+ fill-gray-200
+ stroke-gray-200
+ focus:outline-none`;
+
+export const GeneralMedium = `bg-white
+ border`;
+
+export const EnabledLow = ` text-gray-900
+ hover:bg-gray-100
+ active:text-blue-700
+ active:bg-blue-100
+ focus:bg-blue-100
+ fill-gray-900
+ stroke-gray-900
+ active:fill-blue-600
+ active:stroke-blue-600
+ `;
+
+export const DisabledLow = `text-gray-200
+ fill-gray-200
+ stroke-gray-200`;
+
+export const GenerealLow = `focus:outline-none
+ bg-transparent
+`;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
old mode 100644
new mode 100755
index 39cabd7..3fbc9d4
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,127 +1,127 @@
-import classNames from "classnames";
-import React from "react";
-
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Typography from "./typography/Typography";
-import Heading from "./typography/Heading";
-import Link from "./typography/Link";
-/* -------------------------------------------------------------------------- */
-/* Props */
-/* -------------------------------------------------------------------------- */
-type Props = {
- /**
- * Card component accept children
- */
- children: React.ReactNode;
- /**
- * Styling the card component
- */
- className?: string | undefined;
-};
-
-const Card = ({ children, className }: Props) => {
- return (
-
- {children}
-
- );
-};
-
-// Avatar function
-type AvatarProps = {
- children?: React.ReactNode;
-};
-Card.Avatar = function CardAvatar({ children }: AvatarProps) {
- return {children}
;
-};
-
-// Title function
-Card.Title = function CardTitle({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// SubTitle function
-Card.SubTitle = function CardSubTitle({ children, className }: Props) {
- return (
- {children}
- );
-};
-
-// Body function
-Card.Body = function CardTitle({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Cardheader function
-Card.CardHeader = function CardCardHeader({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Cardcontent function
-Card.CardContent = function CardCardContent({ children, className }: Props) {
- return (
-
- {children}
-
- );
-};
-
-// Cardaction function
-type CardActionProps = {
- children: React.ReactNode;
- className?: string | undefined;
- href?: string;
-};
-Card.CardAction = function CardCardAction({
- children,
- className,
- href = "#",
-}: CardActionProps) {
- return (
-
- {children}
-
- );
-};
-
-// CardMedia function
-type CardMediaProps = {
- children?: React.ReactNode;
- className?: string | undefined;
- src?: string;
-};
-Card.CardMedia = function CardCardMedia({
- className,
- src = "#",
-}: CardMediaProps) {
- return (
-
- );
-};
-
-export default Card;
+import classNames from "classnames";
+import React from "react";
+
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import Typography from "./typography/Typography";
+import Heading from "./typography/Heading";
+import Link from "./typography/Link";
+/* -------------------------------------------------------------------------- */
+/* Props */
+/* -------------------------------------------------------------------------- */
+type Props = {
+ /**
+ * Card component accept children
+ */
+ children: React.ReactNode;
+ /**
+ * Styling the card component
+ */
+ className?: string | undefined;
+};
+
+const Card = ({ children, className }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+// Avatar function
+type AvatarProps = {
+ children?: React.ReactNode;
+};
+Card.Avatar = function CardAvatar({ children }: AvatarProps) {
+ return {children}
;
+};
+
+// Title function
+Card.Title = function CardTitle({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// SubTitle function
+Card.SubTitle = function CardSubTitle({ children, className }: Props) {
+ return (
+ {children}
+ );
+};
+
+// Body function
+Card.Body = function CardTitle({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Cardheader function
+Card.CardHeader = function CardCardHeader({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Cardcontent function
+Card.CardContent = function CardCardContent({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+// Cardaction function
+type CardActionProps = {
+ children: React.ReactNode;
+ className?: string | undefined;
+ href?: string;
+};
+Card.CardAction = function CardCardAction({
+ children,
+ className,
+ href = "#",
+}: CardActionProps) {
+ return (
+
+ {children}
+
+ );
+};
+
+// CardMedia function
+type CardMediaProps = {
+ children?: React.ReactNode;
+ className?: string | undefined;
+ src?: string;
+};
+Card.CardMedia = function CardCardMedia({
+ className,
+ src = "#",
+}: CardMediaProps) {
+ return (
+
+ );
+};
+
+export default Card;
diff --git a/src/components/Cards/CategoryCard.tsx b/src/components/Cards/CategoryCard.tsx
old mode 100644
new mode 100755
index 7690a9a..0edeca8
--- a/src/components/Cards/CategoryCard.tsx
+++ b/src/components/Cards/CategoryCard.tsx
@@ -1,55 +1,55 @@
-import React from "react";
-import { SVGMedicine } from "../icons";
-import Typography from "components/typography/Typography";
-import { Button } from "components/Button/Button";
-import classNames from "classnames";
-import { JsxElement } from "typescript";
-
-type Props = {
- count?: number;
- title: string;
-
- iconChild: Required;
-} & Omit, "">;
-
-function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
- const iconChildStyle =
- "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";
-
- return (
-
-
-
-
- {React.cloneElement(iconChild, {
- className: classNames(iconChildStyle, className),
- })}
-
-
-
-
- {title}
-
-
-
-
- {count} Items
-
-
-
-
-
-
- );
-}
-
-export default CategoryCard;
+import React from "react";
+import { SVGMedicine } from "../icons";
+import Typography from "components/typography/Typography";
+import { Button } from "components/Button/Button";
+import classNames from "classnames";
+import { JsxElement } from "typescript";
+
+type Props = {
+ count?: number;
+ title: string;
+
+ iconChild: Required;
+} & Omit, "">;
+
+function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
+ const iconChildStyle =
+ "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";
+
+ return (
+
+
+
+
+ {React.cloneElement(iconChild, {
+ className: classNames(iconChildStyle, className),
+ })}
+
+
+
+
+ {title}
+
+
+
+
+ {count} Items
+
+
+
+
+
+
+ );
+}
+
+export default CategoryCard;
diff --git a/src/components/Checkbox.stories.tsx b/src/components/Checkbox.stories.tsx
old mode 100644
new mode 100755
index b5ba94b..9c1c42e
--- a/src/components/Checkbox.stories.tsx
+++ b/src/components/Checkbox.stories.tsx
@@ -1,43 +1,43 @@
-import React, { useState } from "react";
-import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
-
-import Checkbox from "./Checkbox";
-
-export default {
- title: "Checkbox",
- component: Checkbox,
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
- argTypes: {
- isChecked: {
- type: "boolean",
- },
- children: {
- type: "string",
- defaultValue: "Use light theme",
- },
- disabled: {
- type: "boolean",
- defaultValue: "false",
- },
- },
-} as ComponentMeta;
-
-const Template: ComponentStory = (args) => (
-
-);
-
-export const Checked = Template.bind({});
-Checked.args = {
- isChecked: true,
- children: "This is custom checkbox",
-};
-
-export const Unchecked = Template.bind({});
-Unchecked.args = {
- isChecked: false,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
- disabled: true,
-};
+import React, { useState } from "react";
+import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Checkbox from "./Checkbox";
+
+export default {
+ title: "Checkbox",
+ component: Checkbox,
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+ argTypes: {
+ isChecked: {
+ type: "boolean",
+ },
+ children: {
+ type: "string",
+ defaultValue: "Use light theme",
+ },
+ disabled: {
+ type: "boolean",
+ defaultValue: "false",
+ },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => (
+
+);
+
+export const Checked = Template.bind({});
+Checked.args = {
+ isChecked: true,
+ children: "This is custom checkbox",
+};
+
+export const Unchecked = Template.bind({});
+Unchecked.args = {
+ isChecked: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ disabled: true,
+};
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
old mode 100644
new mode 100755
index dbf3fd7..d13b86b
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,48 +1,48 @@
-import React from "react";
-import classNames from "classnames";
-import { ReactComponent as Checkmark } from "assets/svg/check.svg";
-
-export type Props = {
- /**
- * Control the state of checkbox
- */
- isChecked: boolean;
- /**
- * An Element next to the checkbox
- */
- children?: React.ReactNode;
-} & Omit, "type">;
-
-const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
- return (
-
-
- {children}
-
- );
-};
-export default Checkbox;
+import React from "react";
+import classNames from "classnames";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
+
+export type Props = {
+ /**
+ * Control the state of checkbox
+ */
+ isChecked: boolean;
+ /**
+ * An Element next to the checkbox
+ */
+ children?: React.ReactNode;
+} & Omit, "type">;
+
+const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
+ return (
+
+
+ {children}
+
+ );
+};
+export default Checkbox;
diff --git a/src/components/CircleLoader.tsx b/src/components/CircleLoader.tsx
old mode 100644
new mode 100755
index b3a9586..958c731
--- a/src/components/CircleLoader.tsx
+++ b/src/components/CircleLoader.tsx
@@ -1,30 +1,30 @@
-import React from "react";
-
-
-export default function CircleLoader() {
- return (
-
-
-
-
-
-
-
-
-
- );
-}
+import React from "react";
+
+
+export default function CircleLoader() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Container.stories.tsx b/src/components/Container.stories.tsx
old mode 100644
new mode 100755
index 83c312c..ecaab15
--- a/src/components/Container.stories.tsx
+++ b/src/components/Container.stories.tsx
@@ -1,88 +1,88 @@
-import React from 'react';
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import Container from './Container';
-
-export default {
- // Title inside navigation bar
- title: 'Container',
- // Component to test
- component: Container,
- // Clarifying the way how to process specific
- // properties of your component and which values
- // it can accept.
-} as ComponentMeta;
-
-/**
- * This is a way to define a tempalte for your component.
- *
- * This template should cover all the states.
- *
- * In most cases you should just distruct args attribute
- * on a returning component.
- */
-const Template: ComponentStory = (args) => (
-
-);
-//
-/* -------------------------------------------------------------------------- */
-/* States of your component */
-/* -------------------------------------------------------------------------- */
-
-export const Desktop: ComponentStory = Template.bind({});
-Desktop.args = {
- className: 'bg-blue-500 w-840 block',
- children: 840px
,
-
-}
-
-Desktop.parameters = {
- viewport: {
- defaultViewport: 'desktop',
-
- viewports: {
-
- desktop: {
- name: 'main_container',
- styles: {
- width: '840px',
- height: '100%',
- paddingLeft: '0.5rem',
- paddingRight: '0.5rem',
- },
- type: 'desktop',
- },
-
- screen_sm: {
- name: 'screen_sm',
- styles: {
- width: 'calc(100% - 30px)',
- height: '100%',
- },
- type: 'tablet',
- },
-
- screen_md: {
- name: 'screen_md',
- styles: {
- width: 'calc(100% - 30px)',
- height: '100%',
- },
- type: 'tablet',
- },
-
- screen_lg_xl_2xl: {
- name: 'lg-xl-2xl',
- styles: {
- width: '840px',
- height: '100%',
- },
- type: 'desktop',
- },
- }
- }
-}
-
-
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Container from './Container';
+
+export default {
+ // Title inside navigation bar
+ title: 'Container',
+ // Component to test
+ component: Container,
+ // Clarifying the way how to process specific
+ // properties of your component and which values
+ // it can accept.
+} as ComponentMeta;
+
+/**
+ * This is a way to define a tempalte for your component.
+ *
+ * This template should cover all the states.
+ *
+ * In most cases you should just distruct args attribute
+ * on a returning component.
+ */
+const Template: ComponentStory = (args) => (
+
+);
+//
+/* -------------------------------------------------------------------------- */
+/* States of your component */
+/* -------------------------------------------------------------------------- */
+
+export const Desktop: ComponentStory = Template.bind({});
+Desktop.args = {
+ className: 'bg-blue-500 w-840 block',
+ children: 840px
,
+
+}
+
+Desktop.parameters = {
+ viewport: {
+ defaultViewport: 'desktop',
+
+ viewports: {
+
+ desktop: {
+ name: 'main_container',
+ styles: {
+ width: '840px',
+ height: '100%',
+ paddingLeft: '0.5rem',
+ paddingRight: '0.5rem',
+ },
+ type: 'desktop',
+ },
+
+ screen_sm: {
+ name: 'screen_sm',
+ styles: {
+ width: 'calc(100% - 30px)',
+ height: '100%',
+ },
+ type: 'tablet',
+ },
+
+ screen_md: {
+ name: 'screen_md',
+ styles: {
+ width: 'calc(100% - 30px)',
+ height: '100%',
+ },
+ type: 'tablet',
+ },
+
+ screen_lg_xl_2xl: {
+ name: 'lg-xl-2xl',
+ styles: {
+ width: '840px',
+ height: '100%',
+ },
+ type: 'desktop',
+ },
+ }
+ }
+}
+
+
\ No newline at end of file
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
old mode 100644
new mode 100755
index f0f2c67..9d913b3
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,28 +1,28 @@
-import classNames from "classnames";
-import React from "react";
-type Props = {
- /**
- * Content of component
- */
- children: React.ReactNode;
- /**
- * Display variants of container
- */
- variant?: "straight" | "wide";
- /**
- * Component styling
- */
- className?: string;
-};
-/**
- * Main container to handle page content max-width on
- * different screen sizes
- */
-export default function Container({ children, variant, className }: Props) {
- const wideClass = variant == "straight" ? "container" : "container-wide";
- return (
-
- {children}
-
- );
-}
+import classNames from "classnames";
+import React from "react";
+type Props = {
+ /**
+ * Content of component
+ */
+ children: React.ReactNode;
+ /**
+ * Display variants of container
+ */
+ variant?: "straight" | "wide";
+ /**
+ * Component styling
+ */
+ className?: string;
+};
+/**
+ * Main container to handle page content max-width on
+ * different screen sizes
+ */
+export default function Container({ children, variant, className }: Props) {
+ const wideClass = variant == "straight" ? "container" : "container-wide";
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/FeaturedArticlesCards.tsx b/src/components/FeaturedArticlesCards.tsx
old mode 100644
new mode 100755
index 753fa1b..2223044
--- a/src/components/FeaturedArticlesCards.tsx
+++ b/src/components/FeaturedArticlesCards.tsx
@@ -1,230 +1,230 @@
-import { useRef } from "react";
-
-/* -------------------------------------------------------------------------- */
-/* Skeleton */
-/* -------------------------------------------------------------------------- */
-import "react-loading-skeleton/dist/skeleton.css";
-
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Typography from "./typography/Typography";
-import SkeletonCard from "./SkeletonCard";
-import AspectRatio from "./AspectRatio";
-import Card from "./Card";
-import Link from "./typography/Link";
-
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg";
-import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
-import { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg";
-
-/* -------------------------------------------------------------------------- */
-/* Swiper */
-/* -------------------------------------------------------------------------- */
-import { Swiper, SwiperSlide } from "swiper/react";
-import SwiperCore, { Navigation } from "swiper";
-import { Pagination } from "swiper";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-// import "./styles.css";
-import "swiper/css";
-/* -------------------------------------------------------------------------- */
-/* Article mock data */
-/* -------------------------------------------------------------------------- */
-
-const articles = [
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "1 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.sit amet consectetur adipisicing elit.Consequuntur ma",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- CoverImg:
- "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
-];
-/* -------------------------------------------------------------------------- */
-/* How many Skeleton cards should be added to the design */
-/* -------------------------------------------------------------------------- */
-let twoCards: boolean = false;
-let threeCards: boolean = false;
-console.log(`Number of cards ${articles.length}`);
-if (articles.length == 2) {
- twoCards = true;
-} else if (articles.length == 3) {
- threeCards = true;
-}
-
-SwiperCore.use([Navigation]);
-
-const FeaturedArticlesCards = () => {
- const navigationPrevRef = useRef(null);
- const navigationNextRef = useRef(null);
- const paginationRef = useRef(null);
-
- return (
-
-
-
-
4 ? true : false}
- pagination={{ el: ".pagination", clickable: true }}
- navigation={{
- prevEl: ".prev",
- nextEl: ".next",
- }}
- breakpoints={{
- 768: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1024: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1280: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- 1580: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- }}
- spaceBetween={25}
- loopFillGroupWithBlank={true}
- modules={[Pagination, Navigation]}
- >
- {articles.map((Articale) => (
-
-
-
-
-
-
-
-
-
-
- {Articale.Body}
-
-
-
-
-
-
- Read More
-
-
-
-
-
-
- ))}
-
- {twoCards && [
-
-
-
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
-
-
-
-
- ,
- ]}
-
- {threeCards && [
-
-
-
-
-
-
-
-
-
-
- ,
- ]}
-
-
-
-
- );
-};
-
-export default FeaturedArticlesCards;
+import { useRef } from "react";
+
+/* -------------------------------------------------------------------------- */
+/* Skeleton */
+/* -------------------------------------------------------------------------- */
+import "react-loading-skeleton/dist/skeleton.css";
+
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import Typography from "./typography/Typography";
+import SkeletonCard from "./SkeletonCard";
+import AspectRatio from "./AspectRatio";
+import Card from "./Card";
+import Link from "./typography/Link";
+
+/* -------------------------------------------------------------------------- */
+/* Icons */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg";
+import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
+import { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg";
+
+/* -------------------------------------------------------------------------- */
+/* Swiper */
+/* -------------------------------------------------------------------------- */
+import { Swiper, SwiperSlide } from "swiper/react";
+import SwiperCore, { Navigation } from "swiper";
+import { Pagination } from "swiper";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+// import "./styles.css";
+import "swiper/css";
+/* -------------------------------------------------------------------------- */
+/* Article mock data */
+/* -------------------------------------------------------------------------- */
+
+const articles = [
+ {
+ CoverImg:
+ "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ Body: "1 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.sit amet consectetur adipisicing elit.Consequuntur ma",
+ Link: "http://pinterest.com",
+ },
+ {
+ CoverImg:
+ "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+ Link: "http://pinterest.com",
+ },
+ {
+ CoverImg:
+ "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+ Link: "http://pinterest.com",
+ },
+ {
+ CoverImg:
+ "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+ Link: "http://pinterest.com",
+ },
+ {
+ CoverImg:
+ "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+ Link: "http://pinterest.com",
+ },
+ {
+ CoverImg:
+ "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+ Link: "http://pinterest.com",
+ },
+ {
+ CoverImg:
+ "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+ Link: "http://pinterest.com",
+ },
+];
+/* -------------------------------------------------------------------------- */
+/* How many Skeleton cards should be added to the design */
+/* -------------------------------------------------------------------------- */
+let twoCards: boolean = false;
+let threeCards: boolean = false;
+console.log(`Number of cards ${articles.length}`);
+if (articles.length == 2) {
+ twoCards = true;
+} else if (articles.length == 3) {
+ threeCards = true;
+}
+
+SwiperCore.use([Navigation]);
+
+const FeaturedArticlesCards = () => {
+ const navigationPrevRef = useRef(null);
+ const navigationNextRef = useRef(null);
+ const paginationRef = useRef(null);
+
+ return (
+
+
+
+
4 ? true : false}
+ pagination={{ el: ".pagination", clickable: true }}
+ navigation={{
+ prevEl: ".prev",
+ nextEl: ".next",
+ }}
+ breakpoints={{
+ 768: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1024: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1280: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ 1580: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ }}
+ spaceBetween={25}
+ loopFillGroupWithBlank={true}
+ modules={[Pagination, Navigation]}
+ >
+ {articles.map((Articale) => (
+
+
+
+
+
+
+
+
+
+
+ {Articale.Body}
+
+
+
+
+
+
+ Read More
+
+
+
+
+
+
+ ))}
+
+ {twoCards && [
+
+
+
+
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ ]}
+
+ {threeCards && [
+
+
+
+
+
+
+
+
+
+
+ ,
+ ]}
+
+
+
+
+ );
+};
+
+export default FeaturedArticlesCards;
diff --git a/src/components/FeaturedAuthorsCards.tsx b/src/components/FeaturedAuthorsCards.tsx
old mode 100644
new mode 100755
index e639ecf..3ef0830
--- a/src/components/FeaturedAuthorsCards.tsx
+++ b/src/components/FeaturedAuthorsCards.tsx
@@ -1,195 +1,195 @@
-/* -------------------------------------------------------------------------- */
-/* Components */
-/* -------------------------------------------------------------------------- */
-import Heading from "./typography/Heading";
-import SkeletonCard from "./SkeletonCard";
-import { Button } from "./Button/Button";
-import Avatar from "./Avatar";
-import Card from "./Card";
-
-/* -------------------------------------------------------------------------- */
-/* Swiper */
-/* -------------------------------------------------------------------------- */
-import { Swiper, SwiperSlide } from "swiper/react";
-import SwiperCore, { Navigation } from "swiper";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-// import "./styles.css";
-import "swiper/css";
-
-/* -------------------------------------------------------------------------- */
-/* Icons */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
-import Link from "./typography/Link";
-
-/* -------------------------------------------------------------------------- */
-/* Variables */
-/* -------------------------------------------------------------------------- */
-SwiperCore.use([Navigation]);
-
-/* -------------------------------------------------------------------------- */
-/* Authors data mock */
-/* -------------------------------------------------------------------------- */
-const authors = [
- {
- Title: "JSON Three",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, adipisicing elit.",
- Link: "http://pinterest.com",
- },
- {
- Title: "JSON Two",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
- Link: "http://pinterest.com",
- img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- },
- {
- Title: "JSON Two",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
- Link: "http://pinterest.com",
- img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- },
- {
- Title: "JSON Two",
- Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
- Link: "http://pinterest.com",
- img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
- },
-];
-
-/* -------------------------------------------------------------------------- */
-/* Number of Cards */
-/* -------------------------------------------------------------------------- */
-let twoCards: boolean = false;
-let threeCards: boolean = false;
-console.log(`Number of cards ${authors.length}`);
-if (authors.length == 2) {
- twoCards = true;
-} else if (authors.length == 3) {
- threeCards = true;
-}
-
-/**
- * Featured authors component to display ...
- */
-export default function FeaturedAuthorsCards(): JSX.Element {
- return (
-
- {/* The Title of Featured Authors section */}
-
Featured Authors
-
- {/* Featured Authors section */}
-
-
4 ? true : false}
- loopFillGroupWithBlank={false}
- breakpoints={{
- 768: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1024: {
- slidesPerView: 2,
- slidesPerGroup: 2,
- },
- 1280: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- 1580: {
- slidesPerView: 4,
- slidesPerGroup: 4,
- },
- }}
- >
- {authors.map((card) => (
-
-
-
-
-
- {card.img ? (
-
- ) : (
-
- {card.Title[0]}
-
- )}
-
- {card.Title}
-
- {card.Body}
-
-
-
-
- See More
-
-
-
-
-
- ))}
-
- {twoCards && [
-
-
-
-
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
-
-
-
-
-
- ,
- ]}
-
- {threeCards && [
-
-
-
-
-
-
-
-
-
-
-
- ,
- ]}
-
-
-
-
- Show All
-
-
- );
-}
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import Heading from "./typography/Heading";
+import SkeletonCard from "./SkeletonCard";
+import { Button } from "./Button/Button";
+import Avatar from "./Avatar";
+import Card from "./Card";
+
+/* -------------------------------------------------------------------------- */
+/* Swiper */
+/* -------------------------------------------------------------------------- */
+import { Swiper, SwiperSlide } from "swiper/react";
+import SwiperCore, { Navigation } from "swiper";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+// import "./styles.css";
+import "swiper/css";
+
+/* -------------------------------------------------------------------------- */
+/* Icons */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
+import Link from "./typography/Link";
+
+/* -------------------------------------------------------------------------- */
+/* Variables */
+/* -------------------------------------------------------------------------- */
+SwiperCore.use([Navigation]);
+
+/* -------------------------------------------------------------------------- */
+/* Authors data mock */
+/* -------------------------------------------------------------------------- */
+const authors = [
+ {
+ Title: "JSON Three",
+ Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, adipisicing elit.",
+ Link: "http://pinterest.com",
+ },
+ {
+ Title: "JSON Two",
+ Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
+ Link: "http://pinterest.com",
+ img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ },
+ {
+ Title: "JSON Two",
+ Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
+ Link: "http://pinterest.com",
+ img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ },
+ {
+ Title: "JSON Two",
+ Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
+ Link: "http://pinterest.com",
+ img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+ },
+];
+
+/* -------------------------------------------------------------------------- */
+/* Number of Cards */
+/* -------------------------------------------------------------------------- */
+let twoCards: boolean = false;
+let threeCards: boolean = false;
+console.log(`Number of cards ${authors.length}`);
+if (authors.length == 2) {
+ twoCards = true;
+} else if (authors.length == 3) {
+ threeCards = true;
+}
+
+/**
+ * Featured authors component to display ...
+ */
+export default function FeaturedAuthorsCards(): JSX.Element {
+ return (
+
+ {/* The Title of Featured Authors section */}
+
Featured Authors
+
+ {/* Featured Authors section */}
+
+
4 ? true : false}
+ loopFillGroupWithBlank={false}
+ breakpoints={{
+ 768: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1024: {
+ slidesPerView: 2,
+ slidesPerGroup: 2,
+ },
+ 1280: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ 1580: {
+ slidesPerView: 4,
+ slidesPerGroup: 4,
+ },
+ }}
+ >
+ {authors.map((card) => (
+
+
+
+
+
+ {card.img ? (
+
+ ) : (
+
+ {card.Title[0]}
+
+ )}
+
+ {card.Title}
+
+ {card.Body}
+
+
+
+
+ See More
+
+
+
+
+
+ ))}
+
+ {twoCards && [
+
+
+
+
+
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ ]}
+
+ {threeCards && [
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ ]}
+
+
+
+
+ Show All
+
+
+ );
+}
diff --git a/src/components/Hexagon.tsx b/src/components/Hexagon.tsx
old mode 100644
new mode 100755
index f0cf640..a0e758a
--- a/src/components/Hexagon.tsx
+++ b/src/components/Hexagon.tsx
@@ -1,69 +1,69 @@
-import classNames from "classnames";
-import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
-import React from "react";
-
-type Props = {
- className?: string | undefined;
- children: string;
- fontSize?: number;
- variant?: StyleColorVariants | undefined;
-};
-
-const hexagonStyles: StyleColorVariantsMap = {
- gray: "fill-gray-500",
- pink: "fill-pink-500",
- blue: "fill-blue-500",
- purple: "fill-purple-500",
- red: "fill-red-500",
- yellow: "fill-yellow-600",
- emerald: "fill-emerald-500",
- sky: "fill-sky-500",
- "dark-coral": "fill-dark-coral-500"
-};
-
-/**
- * Hexagon sign
- * @param {string} children Characters to exclude from svg figure
- * @param {string|undefined} className Classes used to customize svg element
- * @param {number} fontSize Font size for excluding characters
- * @return {JSX.Element}
- */
-export default function Hexagon({
- className,
- children,
- fontSize = 24,
- variant = "blue",
-}: Props): JSX.Element {
- const classes = hexagonStyles[variant];
- return (
-
- {fontSize && (
-
-
-
-
- {children}
-
-
-
- )}
-
-
- );
-}
+import classNames from "classnames";
+import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
+import React from "react";
+
+type Props = {
+ className?: string | undefined;
+ children: string;
+ fontSize?: number;
+ variant?: StyleColorVariants | undefined;
+};
+
+const hexagonStyles: StyleColorVariantsMap = {
+ gray: "fill-gray-500",
+ pink: "fill-pink-500",
+ blue: "fill-blue-500",
+ purple: "fill-purple-500",
+ red: "fill-red-500",
+ yellow: "fill-yellow-600",
+ emerald: "fill-emerald-500",
+ sky: "fill-sky-500",
+ "dark-coral": "fill-dark-coral-500"
+};
+
+/**
+ * Hexagon sign
+ * @param {string} children Characters to exclude from svg figure
+ * @param {string|undefined} className Classes used to customize svg element
+ * @param {number} fontSize Font size for excluding characters
+ * @return {JSX.Element}
+ */
+export default function Hexagon({
+ className,
+ children,
+ fontSize = 24,
+ variant = "blue",
+}: Props): JSX.Element {
+ const classes = hexagonStyles[variant];
+ return (
+
+ {fontSize && (
+
+
+
+
+ {children}
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/HexagonOutlined.tsx b/src/components/HexagonOutlined.tsx
old mode 100644
new mode 100755
index 9aa7f35..d64a7ba
--- a/src/components/HexagonOutlined.tsx
+++ b/src/components/HexagonOutlined.tsx
@@ -1,65 +1,65 @@
-import classNames from "classnames";
-import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
-import React from "react";
-
-type Props = {
- className?: string | undefined;
- children: string;
- fontSize?: number;
- variant?: StyleColorVariants | undefined;
-};
-
-const hexagonStyles: StyleColorVariantsMap = {
- gray: "stroke-gray-500",
- pink: "stroke-pink-500",
- blue: "stroke-blue-500",
- purple: "stroke-purple-500",
- red: "stroke-red-500",
- yellow: "stroke-yellow-600",
- emerald: "stroke-emerald-500",
- sky: "stroke-sky-500",
- "dark-coral": "stroke-dark-coral-500",
-};
-
-/**
- * Hexagon sign
- * @param {string} children Characters to exclude from svg figure
- * @param {string|undefined} className Classes used to customize svg element
- * @param {number} fontSize Font size for excluding characters
- * @return {JSX.Element}
- */
-export default function HexagonOutlined({
- className,
- children,
- fontSize = 24,
- variant,
-}: Props): JSX.Element {
- const classes = variant ? hexagonStyles[variant] : "stroke-white";
- return (
-
-
-
- {children}
-
-
- );
-}
+import classNames from "classnames";
+import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
+import React from "react";
+
+type Props = {
+ className?: string | undefined;
+ children: string;
+ fontSize?: number;
+ variant?: StyleColorVariants | undefined;
+};
+
+const hexagonStyles: StyleColorVariantsMap = {
+ gray: "stroke-gray-500",
+ pink: "stroke-pink-500",
+ blue: "stroke-blue-500",
+ purple: "stroke-purple-500",
+ red: "stroke-red-500",
+ yellow: "stroke-yellow-600",
+ emerald: "stroke-emerald-500",
+ sky: "stroke-sky-500",
+ "dark-coral": "stroke-dark-coral-500",
+};
+
+/**
+ * Hexagon sign
+ * @param {string} children Characters to exclude from svg figure
+ * @param {string|undefined} className Classes used to customize svg element
+ * @param {number} fontSize Font size for excluding characters
+ * @return {JSX.Element}
+ */
+export default function HexagonOutlined({
+ className,
+ children,
+ fontSize = 24,
+ variant,
+}: Props): JSX.Element {
+ const classes = variant ? hexagonStyles[variant] : "stroke-white";
+ return (
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/components/Icons.stories.tsx b/src/components/Icons.stories.tsx
old mode 100644
new mode 100755
index b4bfd62..e516cfd
--- a/src/components/Icons.stories.tsx
+++ b/src/components/Icons.stories.tsx
@@ -1,37 +1,37 @@
-import React from 'react';
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import {
- SVGBookmark
-} from "./icons";
-
-
-type Props = {
- item: React.FunctionComponent>
-}& React.SVGProps;
-
-const Icon = ({item, ...props}: Props) => {
- const Item = item;
- return
-}
-
-export default {
- // Title inside navigation bar
- title: 'Icons',
- // Component to test
- component: Icon,
- // Specify subcomponents to be able to work with
- // nested structure,
-} as ComponentMeta;
-
-
-const Template: ComponentStory = (args) => (
-
-);
-
-export const Bookmark = Template.bind({});
-Bookmark.args = {
- item: SVGBookmark,
- className: "fill-blue-500"
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import {
+ SVGBookmark
+} from "./icons";
+
+
+type Props = {
+ item: React.FunctionComponent>
+}& React.SVGProps;
+
+const Icon = ({item, ...props}: Props) => {
+ const Item = item;
+ return
+}
+
+export default {
+ // Title inside navigation bar
+ title: 'Icons',
+ // Component to test
+ component: Icon,
+ // Specify subcomponents to be able to work with
+ // nested structure,
+} as ComponentMeta;
+
+
+const Template: ComponentStory = (args) => (
+
+);
+
+export const Bookmark = Template.bind({});
+Bookmark.args = {
+ item: SVGBookmark,
+ className: "fill-blue-500"
};
\ No newline at end of file
diff --git a/src/components/Inputgroup.tsx b/src/components/Inputgroup.tsx
old mode 100644
new mode 100755
index eb62bbd..4f93040
--- a/src/components/Inputgroup.tsx
+++ b/src/components/Inputgroup.tsx
@@ -1,53 +1,53 @@
-/**
- * A container for components
- * Any component can be a child for this container
- */
-import React, { useEffect, useState, cloneElement } from "react";
-import classNames from "classnames";
-
-const focusable = ["input", "select", "textarea", "button"];
-
-export type Props = {
- /**
- * Container's children
- */
- children?: React.ReactNode | React.ReactNode[];
-} & React.HTMLProps;
-
-const Inputgroup = ({ children, className }: Props) => {
- const [focused, setFocused] = useState(false);
- useEffect(() => {}, [focused]);
- const arrChildren = React.Children.toArray(children);
-
- return (
-
- {arrChildren.map((e) => {
- if (
- React.isValidElement(e) &&
- typeof e.type === "string" &&
- focusable.includes(e.type)
- ) {
- return cloneElement(e as React.ReactComponentElement<"input">, {
- onFocus: (event: any) => {
- setFocused(true);
- e.props.onFocus && e.props.onFocus(event);
- },
- onBlur: (event: any) => {
- setFocused(false);
- e.props.onBlur && e.props.onBlur(event);
- },
- });
- }
- return e;
- })}
-
- );
-};
-
-export default Inputgroup;
+/**
+ * A container for components
+ * Any component can be a child for this container
+ */
+import React, { useEffect, useState, cloneElement } from "react";
+import classNames from "classnames";
+
+const focusable = ["input", "select", "textarea", "button"];
+
+export type Props = {
+ /**
+ * Container's children
+ */
+ children?: React.ReactNode | React.ReactNode[];
+} & React.HTMLProps;
+
+const Inputgroup = ({ children, className }: Props) => {
+ const [focused, setFocused] = useState(false);
+ useEffect(() => {}, [focused]);
+ const arrChildren = React.Children.toArray(children);
+
+ return (
+
+ {arrChildren.map((e) => {
+ if (
+ React.isValidElement(e) &&
+ typeof e.type === "string" &&
+ focusable.includes(e.type)
+ ) {
+ return cloneElement(e as React.ReactComponentElement<"input">, {
+ onFocus: (event: any) => {
+ setFocused(true);
+ e.props.onFocus && e.props.onFocus(event);
+ },
+ onBlur: (event: any) => {
+ setFocused(false);
+ e.props.onBlur && e.props.onBlur(event);
+ },
+ });
+ }
+ return e;
+ })}
+
+ );
+};
+
+export default Inputgroup;
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
old mode 100644
new mode 100755
index 0619745..8f1993e
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,37 +1,37 @@
-import React from "react";
-import classNames from "classnames";
-export type Props = {
- className?: string;
- fillColors?: "blue" | "gray";
-};
-
-const Logo = ({ className, fillColors = "blue" }: Props) => {
- return (
-
- );
-};
-
-export default Logo;
+import React from "react";
+import classNames from "classnames";
+export type Props = {
+ className?: string;
+ fillColors?: "blue" | "gray";
+};
+
+const Logo = ({ className, fillColors = "blue" }: Props) => {
+ return (
+
+ );
+};
+
+export default Logo;
diff --git a/src/components/Logofreeland.tsx b/src/components/Logofreeland.tsx
old mode 100644
new mode 100755
index 88e6cdf..2fbcb29
--- a/src/components/Logofreeland.tsx
+++ b/src/components/Logofreeland.tsx
@@ -1,39 +1,39 @@
-import React from "react";
-import classNames from "classnames";
-export type Props = {
- className?: string;
-};
-
-const Logofreeland = ({ className }: Props) => {
- return (
-
- );
-};
-
-export default Logofreeland;
+import React from "react";
+import classNames from "classnames";
+export type Props = {
+ className?: string;
+};
+
+const Logofreeland = ({ className }: Props) => {
+ return (
+
+ );
+};
+
+export default Logofreeland;
diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx
old mode 100644
new mode 100755
index 8c76507..95ac679
--- a/src/components/MainSection.tsx
+++ b/src/components/MainSection.tsx
@@ -1,3 +1,4 @@
+<<<<<<< Updated upstream
/* -------------------------------------------------------------------------- */
/* Imports */
/* -------------------------------------------------------------------------- */
@@ -102,3 +103,108 @@ export default function MainSection({