From fd3ef3fb9c7f821238949825dfa086bdb04f6465 Mon Sep 17 00:00:00 2001 From: Maximus Date: Wed, 17 Aug 2022 16:56:37 +0300 Subject: [PATCH 1/7] added RouterLink component setup route system --- src/components/typography/RouterLink.tsx | 1 + src/index.tsx | 26 +++++++++++++++--------- 2 files changed, 17 insertions(+), 10 deletions(-) create mode 100644 src/components/typography/RouterLink.tsx diff --git a/src/components/typography/RouterLink.tsx b/src/components/typography/RouterLink.tsx new file mode 100644 index 0000000..2b03587 --- /dev/null +++ b/src/components/typography/RouterLink.tsx @@ -0,0 +1 @@ +export { NavLink as RouterLink } from "react-router-dom"; diff --git a/src/index.tsx b/src/index.tsx index 67c9221..df65e1b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,16 +1,22 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; import "./localization/i18n"; - -ReactDOM.render( +const rootElement = document.getElementById("root"); +if (!rootElement) throw new Error("Failed to find the root element"); +const root = ReactDOM.createRoot(rootElement); +root.render( - - , - document.getElementById('root') + + + }> + + + ); // If you want to start measuring performance in your app, pass a function From 414e7e62d8180d5e27eb1c38980cb26e59840c0a Mon Sep 17 00:00:00 2001 From: Maximus Date: Wed, 17 Aug 2022 18:53:07 +0300 Subject: [PATCH 2/7] closed #62 Created footer --- src/assets/svg/facebook.svg | 3 + src/assets/svg/instagram.svg | 3 + src/assets/svg/rmProps.sh | 6 ++ src/components/parts/Footer.tsx | 108 ++++++++++++++++++++++++++++++++ 4 files changed, 120 insertions(+) create mode 100644 src/assets/svg/facebook.svg create mode 100644 src/assets/svg/instagram.svg create mode 100644 src/assets/svg/rmProps.sh create mode 100644 src/components/parts/Footer.tsx diff --git a/src/assets/svg/facebook.svg b/src/assets/svg/facebook.svg new file mode 100644 index 0000000..53f04b9 --- /dev/null +++ b/src/assets/svg/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/instagram.svg b/src/assets/svg/instagram.svg new file mode 100644 index 0000000..27fca3d --- /dev/null +++ b/src/assets/svg/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/rmProps.sh b/src/assets/svg/rmProps.sh new file mode 100644 index 0000000..2162617 --- /dev/null +++ b/src/assets/svg/rmProps.sh @@ -0,0 +1,6 @@ +#!/bin/bash +ls *.svg | while read filename; do +sed -i '1 s/width=\"..\" height=\"..\" //' $filename; +sed -i 's/fill=\"#262626\"/stroke="none"/' $filename; +sed -i 's/stroke=\"#262626\"/fill="none"/' $filename +done \ No newline at end of file diff --git a/src/components/parts/Footer.tsx b/src/components/parts/Footer.tsx new file mode 100644 index 0000000..be26882 --- /dev/null +++ b/src/components/parts/Footer.tsx @@ -0,0 +1,108 @@ +import React, { useMemo, useState } from "react"; +/* -------------------------------------------------------------------------- */ +/* Import Components */ +/* -------------------------------------------------------------------------- */ +import Typography from "components/typography/Typography"; +import { SVGFacebook, SVGInstagram, SVGCircle } from "components/icons"; +import { RouterLink } from "components/typography/RouterLink"; +import Link from "components/typography/Link"; + +/* -------------------------------------------------------------------------- */ +/* Define consts */ +/* -------------------------------------------------------------------------- */ + +const mainLinks = [ + { label: "account settings", url: "#", enabled: true }, + { label: "about freeland", url: "/about", enabled: true }, + { label: "help", url: "#", enabled: true }, + { label: "contact us", url: "#", enabled: true }, +]; + +const secondaryLinks = [ + { index: 1, label: "Terms of Use", url: "#", enabled: true }, + { index: 2, label: "Privacy Policy", url: "#", enabled: true }, + { index: 3, label: "Cookies Policy", url: "#", enabled: true }, +]; + +/* -------------------------------------------------------------------------- */ +/* Difine parts of footer */ +/* -------------------------------------------------------------------------- */ + +/* -------------------- Icons with social networks icons -------------------- */ +const circleDivider = ( + +); + +/* -------------------------------------------------------------------------- */ +/* Define component footer */ +/* -------------------------------------------------------------------------- */ + +export function Footer() { + /* -------------------------- Part with main links -------------------------- */ + const mainLinksPart = useMemo( + () => + mainLinks.map((link) => ( + + + {link.label.toUpperCase()} + + + )), + mainLinks + ); + /* ------------------------ Part with secondary links ----------------------- */ + const secondaryLinksPart = useMemo( + () => + secondaryLinks.map((link) => ( +
+ {link.index != 1 && circleDivider} + + {link.label} + +
+ )), + secondaryLinks + ); + + /* -------------------------------------------------------------------------- */ + /* Implement footer component */ + /* -------------------------------------------------------------------------- */ + return ( +
+
+
+ + Freeland + +
+
+ {mainLinksPart} +
+
+ + {" "} +
+
+
+
+ + @ Copyright 2022 Freeland - All rights reserved + +
{circleDivider}
+
{secondaryLinksPart}
+
+
+ Supported by + + Comfortel + +
+
+
+ ); +} From f39f7ab4cd8e5839e52df2c64402320c9387cc6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Wed, 17 Aug 2022 20:29:00 +0300 Subject: [PATCH 3/7] Dropdown has been modified - Button converted to Link --- src/components/ContextMenu.tsx | 115 +++++++++++++++++++++++++++ src/components/ContextMenuAction.tsx | 34 ++++++++ 2 files changed, 149 insertions(+) create mode 100644 src/components/ContextMenu.tsx create mode 100644 src/components/ContextMenuAction.tsx diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx new file mode 100644 index 0000000..0073083 --- /dev/null +++ b/src/components/ContextMenu.tsx @@ -0,0 +1,115 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React, { Fragment } from "react"; +import { Menu, Transition } from "@headlessui/react"; +import { PropsPartion } from "./ContextMenuItem"; +import classNames from "classnames"; +import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg"; +type ChildType = React.ReactElement; +type ChildrenType = ChildType[] | ChildType; + +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ + +type MenuProps = { + emphasis?: "high" | "low"; + disabled?: boolean; + className?: string | undefined; + button: React.ReactNode; + children: ChildrenType; +}; +/* -------------------------------------------------------------------------- */ +/* Styles */ +/* -------------------------------------------------------------------------- */ + +const MenuButtonStyle = ` +inline-flex +justify-center w-full +cursor-default +rounded +border border-gray-100 +outline-8 +py-2 +px-2 +text-base`; + +const MenuItemStyle = ` +absolute +left-0 +mt-2 w-60 +origin-top-left +rounded +shadow-lg +focus:outline-none +py-2 px-4 sm:text-sm`; + +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ +/** + * Use width ContextMenuAction.tsx , for example: + * + * alert('click')} + * > + * ... + * + */ +export default function ContextMenu({ + button, + children, + className, + emphasis = "low", +}: MenuProps) { + return ( + + {({ open }) => ( + <> + + {button} + + + + + {children} + + + + )} + + ); +} diff --git a/src/components/ContextMenuAction.tsx b/src/components/ContextMenuAction.tsx new file mode 100644 index 0000000..9d3af26 --- /dev/null +++ b/src/components/ContextMenuAction.tsx @@ -0,0 +1,34 @@ +import classNames from "classnames"; +import React from "react"; + +type Props = { + action: Function; + caption: string; + disabled?: boolean; + icon?: React.ReactNode; + className?: string | undefined; +}; + +export default function ContextMenuAction({ + action, + caption, + disabled, + icon, + className, +}: Props) { + return ( + action(e)} + // disabled={disabled} + className={classNames([ + "group flex px-2 rounded items-center text-base hover:bg-gray-100", + // { "opacity-50": disabled, "cursor-default": !disabled }, + className, + ])} + > + {icon &&
{icon}
} + {caption} +
+ ); +} From d21ed0350845d79628479eef3217e4525cd2a87c Mon Sep 17 00:00:00 2001 From: Maximus Date: Thu, 18 Aug 2022 11:32:18 +0300 Subject: [PATCH 4/7] closed issue #82 - add information pages mention in footer and routes to them --- src/index.tsx | 19 ++++++++++++++++++- src/pages/Information/About.tsx | 15 +++++++++++++++ src/pages/Information/AccountSettings.tsx | 15 +++++++++++++++ src/pages/Information/ContactUs.tsx | 15 +++++++++++++++ src/pages/Information/CookiesPolicy.tsx | 15 +++++++++++++++ src/pages/Information/Help.tsx | 15 +++++++++++++++ src/pages/Information/PrivacyPolicy.tsx | 15 +++++++++++++++ src/pages/Information/TermsOfUse.tsx | 15 +++++++++++++++ 8 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 src/pages/Information/About.tsx create mode 100644 src/pages/Information/AccountSettings.tsx create mode 100644 src/pages/Information/ContactUs.tsx create mode 100644 src/pages/Information/CookiesPolicy.tsx create mode 100644 src/pages/Information/Help.tsx create mode 100644 src/pages/Information/PrivacyPolicy.tsx create mode 100644 src/pages/Information/TermsOfUse.tsx diff --git a/src/index.tsx b/src/index.tsx index df65e1b..c390a65 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,14 @@ import App from "./App"; import reportWebVitals from "./reportWebVitals"; import "./localization/i18n"; +import About from "pages/Information/About"; +import Help from "pages/Information/Help"; +import ContactUs from "pages/Information/ContactUs"; +import TermsOfUse from "pages/Information/TermsOfUse"; +import PrivacyPolicy from "pages/Information/PrivacyPolicy"; +import CookiesPolicy from "pages/Information/CookiesPolicy"; +import AccountSettings from "pages/Information/AccountSettings"; + const rootElement = document.getElementById("root"); if (!rootElement) throw new Error("Failed to find the root element"); const root = ReactDOM.createRoot(rootElement); @@ -13,7 +21,16 @@ root.render( - }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + diff --git a/src/pages/Information/About.tsx b/src/pages/Information/About.tsx new file mode 100644 index 0000000..ce57d7e --- /dev/null +++ b/src/pages/Information/About.tsx @@ -0,0 +1,15 @@ +import BaseLayout from "components/BaseLayout"; +import { Footer } from "components/parts/Footer"; +import Header from "components/parts/Header"; +import Typography from "components/typography/Typography"; +import React from "react"; + +type Props = {}; + +export default function About({}: Props) { + return ( + + About page + + ); +} diff --git a/src/pages/Information/AccountSettings.tsx b/src/pages/Information/AccountSettings.tsx new file mode 100644 index 0000000..983334f --- /dev/null +++ b/src/pages/Information/AccountSettings.tsx @@ -0,0 +1,15 @@ +import BaseLayout from "components/BaseLayout"; +import { Footer } from "components/parts/Footer"; +import Header from "components/parts/Header"; +import Typography from "components/typography/Typography"; +import React from "react"; + +type Props = {}; + +export default function AccountSettings({}: Props) { + return ( + + Accont Setting page + + ); +} diff --git a/src/pages/Information/ContactUs.tsx b/src/pages/Information/ContactUs.tsx new file mode 100644 index 0000000..271cfa2 --- /dev/null +++ b/src/pages/Information/ContactUs.tsx @@ -0,0 +1,15 @@ +import BaseLayout from "components/BaseLayout"; +import { Footer } from "components/parts/Footer"; +import Header from "components/parts/Header"; +import Typography from "components/typography/Typography"; +import React from "react"; + +type Props = {}; + +export default function ContactUs({}: Props) { + return ( + + Contact us page + + ); +} diff --git a/src/pages/Information/CookiesPolicy.tsx b/src/pages/Information/CookiesPolicy.tsx new file mode 100644 index 0000000..42c0980 --- /dev/null +++ b/src/pages/Information/CookiesPolicy.tsx @@ -0,0 +1,15 @@ +import BaseLayout from "components/BaseLayout"; +import { Footer } from "components/parts/Footer"; +import Header from "components/parts/Header"; +import Typography from "components/typography/Typography"; +import React from "react"; + +type Props = {}; + +export default function CookiesPolicy({}: Props) { + return ( + + Privacy Cookies page + + ); +} diff --git a/src/pages/Information/Help.tsx b/src/pages/Information/Help.tsx new file mode 100644 index 0000000..996b488 --- /dev/null +++ b/src/pages/Information/Help.tsx @@ -0,0 +1,15 @@ +import BaseLayout from "components/BaseLayout"; +import { Footer } from "components/parts/Footer"; +import Header from "components/parts/Header"; +import Typography from "components/typography/Typography"; +import React from "react"; + +type Props = {}; + +export default function Help({}: Props) { + return ( + + Help page + + ); +} diff --git a/src/pages/Information/PrivacyPolicy.tsx b/src/pages/Information/PrivacyPolicy.tsx new file mode 100644 index 0000000..fa35eff --- /dev/null +++ b/src/pages/Information/PrivacyPolicy.tsx @@ -0,0 +1,15 @@ +import BaseLayout from "components/BaseLayout"; +import { Footer } from "components/parts/Footer"; +import Header from "components/parts/Header"; +import Typography from "components/typography/Typography"; +import React from "react"; + +type Props = {}; + +export default function PrivacyPolicy({}: Props) { + return ( + + Privacy Policy page + + ); +} diff --git a/src/pages/Information/TermsOfUse.tsx b/src/pages/Information/TermsOfUse.tsx new file mode 100644 index 0000000..6700455 --- /dev/null +++ b/src/pages/Information/TermsOfUse.tsx @@ -0,0 +1,15 @@ +import BaseLayout from "components/BaseLayout"; +import { Footer } from "components/parts/Footer"; +import Header from "components/parts/Header"; +import Typography from "components/typography/Typography"; +import React from "react"; + +type Props = {}; + +export default function TermsOfUse({}: Props) { + return ( + + Terms of use page + + ); +} From b82eb8290b15e6b9b8db92a65ea3f839ac2ff67e Mon Sep 17 00:00:00 2001 From: Maximus Date: Thu, 18 Aug 2022 11:34:36 +0300 Subject: [PATCH 5/7] modified router link --- src/components/typography/RouterLink.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/typography/RouterLink.tsx b/src/components/typography/RouterLink.tsx index 2b03587..4b32e77 100644 --- a/src/components/typography/RouterLink.tsx +++ b/src/components/typography/RouterLink.tsx @@ -1 +1,18 @@ -export { NavLink as RouterLink } from "react-router-dom"; +import classNames from "classnames"; +import { NavLink, NavLinkProps, To } from "react-router-dom"; + +type Props = { + enabled?: boolean; + children?: React.ReactNode; +} & NavLinkProps; + +export function RouterLink({ children, enabled = true, className, to }: Props) { + return ( + + {children} + + ); +} From f56ae412357ae6b80923b5594f9173ab51c00c63 Mon Sep 17 00:00:00 2001 From: Maximus Date: Thu, 18 Aug 2022 11:39:50 +0300 Subject: [PATCH 6/7] modified footer add router and default link --- src/components/parts/Footer.tsx | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/parts/Footer.tsx b/src/components/parts/Footer.tsx index be26882..dcc3331 100644 --- a/src/components/parts/Footer.tsx +++ b/src/components/parts/Footer.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react"; +import React, { useMemo } from "react"; /* -------------------------------------------------------------------------- */ /* Import Components */ /* -------------------------------------------------------------------------- */ @@ -12,16 +12,16 @@ import Link from "components/typography/Link"; /* -------------------------------------------------------------------------- */ const mainLinks = [ - { label: "account settings", url: "#", enabled: true }, + { label: "account settings", url: "/account/settings", enabled: true }, { label: "about freeland", url: "/about", enabled: true }, - { label: "help", url: "#", enabled: true }, - { label: "contact us", url: "#", enabled: true }, + { label: "help", url: "/help", enabled: true }, + { label: "contact us", url: "/contact-us", enabled: true }, ]; const secondaryLinks = [ - { index: 1, label: "Terms of Use", url: "#", enabled: true }, - { index: 2, label: "Privacy Policy", url: "#", enabled: true }, - { index: 3, label: "Cookies Policy", url: "#", enabled: true }, + { index: 1, label: "Terms of Use", url: "/terms-of-use", enabled: true }, + { index: 2, label: "Privacy Policy", url: "/privacy-policy", enabled: true }, + { index: 3, label: "Cookies Policy", url: "/cookies-policy", enabled: true }, ]; /* -------------------------------------------------------------------------- */ @@ -76,16 +76,23 @@ export function Footer() {
- - Freeland - + + + Freeland + +
{mainLinksPart}
- - {" "} + + + + + {" "} + +
From e8f8777fa85b84382d2055709e6470f9c981859d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Thu, 18 Aug 2022 12:22:41 +0300 Subject: [PATCH 7/7] Unimportant comments have been removed --- src/components/ContextMenuAction.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/ContextMenuAction.tsx b/src/components/ContextMenuAction.tsx index 9d3af26..8d1e653 100644 --- a/src/components/ContextMenuAction.tsx +++ b/src/components/ContextMenuAction.tsx @@ -20,10 +20,8 @@ export default function ContextMenuAction({ action(e)} - // disabled={disabled} className={classNames([ "group flex px-2 rounded items-center text-base hover:bg-gray-100", - // { "opacity-50": disabled, "cursor-default": !disabled }, className, ])} >