From acb45c7e69ef00b44ba2fdb26ae246909697518c Mon Sep 17 00:00:00 2001 From: lifeparticle Date: Thu, 26 Oct 2023 22:37:05 +1100 Subject: [PATCH] home page --- ui/src/assets/Home/features.svg | 1 + .../Drawer.module.scss} | 0 .../General/{Beam => Drawer}/index.tsx | 20 ++-- .../Hoc/withPageTitle/withPageTitle.tsx | 4 +- ui/src/hooks/useOnlineStatus.ts | 18 +++ ui/src/pages/Automation/GithubIssue/index.tsx | 11 +- ui/src/pages/Home/Home.module.scss | 61 +++++----- ui/src/pages/Home/components/Contribution.tsx | 36 ++---- ui/src/pages/Home/components/Features.tsx | 110 ++++++++++-------- ui/src/pages/Home/components/Hero.tsx | 50 ++++---- 10 files changed, 166 insertions(+), 145 deletions(-) create mode 100644 ui/src/assets/Home/features.svg rename ui/src/components/General/{Beam/Beam.module.scss => Drawer/Drawer.module.scss} (100%) rename ui/src/components/General/{Beam => Drawer}/index.tsx (79%) create mode 100644 ui/src/hooks/useOnlineStatus.ts diff --git a/ui/src/assets/Home/features.svg b/ui/src/assets/Home/features.svg new file mode 100644 index 00000000..7178502d --- /dev/null +++ b/ui/src/assets/Home/features.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/src/components/General/Beam/Beam.module.scss b/ui/src/components/General/Drawer/Drawer.module.scss similarity index 100% rename from ui/src/components/General/Beam/Beam.module.scss rename to ui/src/components/General/Drawer/Drawer.module.scss diff --git a/ui/src/components/General/Beam/index.tsx b/ui/src/components/General/Drawer/index.tsx similarity index 79% rename from ui/src/components/General/Beam/index.tsx rename to ui/src/components/General/Drawer/index.tsx index cdb378f6..6b0e0e1d 100644 --- a/ui/src/components/General/Beam/index.tsx +++ b/ui/src/components/General/Drawer/index.tsx @@ -1,21 +1,21 @@ import React, { useState } from "react"; -import { Drawer, Space } from "antd"; +import { Drawer as AntDDrawer, Space } from "antd"; import Icon from "components/General/Icon"; -import style from "./Beam.module.scss"; +import style from "./Drawer.module.scss"; import { useNavigate, useSearchParams } from "react-router-dom"; -import { ResponsiveButton } from "../FormComponents"; +import { ResponsiveButton } from "components/General/FormComponents"; import { BeamDetail } from "components/Hoc/withPageTitle/utils/constants"; -interface BeamProps { +interface DrawerProps { beamObject: BeamDetail[]; } -const Beam: React.FC = ({ beamObject }) => { +const Drawer: React.FC = ({ beamObject }) => { const [open, setOpen] = useState(false); const [searchParams] = useSearchParams(); const navigate = useNavigate(); - if (beamObject.length === 0) return null; + if (beamObject.length === 0) return; const showDrawer = () => { setOpen(true); @@ -49,8 +49,8 @@ const Beam: React.FC = ({ beamObject }) => { - = ({ beamObject }) => { ))} - + ); }; -export default Beam; +export default Drawer; diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx index e013ef18..ad045d9e 100644 --- a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx +++ b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx @@ -7,7 +7,7 @@ import { HeadProvider, Title, Link, Meta } from "react-head"; import { NO_PADDING, NO_TITLE } from "./utils/constants"; import { ErrorBoundary } from "react-error-boundary"; import FallbackComponent from "components/General/FallbackComponent"; -import Beam from "components/General/Beam"; +import Drawer from "components/General/Drawer"; const withPageTitle = ( WrappedComponent: React.ComponentType @@ -55,7 +55,7 @@ const withPageTitle = ( {beamObject.length > 0 && ( - + )} diff --git a/ui/src/hooks/useOnlineStatus.ts b/ui/src/hooks/useOnlineStatus.ts new file mode 100644 index 00000000..9b19f8b5 --- /dev/null +++ b/ui/src/hooks/useOnlineStatus.ts @@ -0,0 +1,18 @@ +import { useSyncExternalStore } from "react"; + +function subscribe(callback: () => void): () => void { + window.addEventListener("online", callback); + window.addEventListener("offline", callback); + return () => { + window.removeEventListener("online", callback); + window.removeEventListener("offline", callback); + }; +} + +export function useOnlineStatus(): boolean { + return useSyncExternalStore( + subscribe, + () => navigator.onLine, // client + () => true // server + ); +} diff --git a/ui/src/pages/Automation/GithubIssue/index.tsx b/ui/src/pages/Automation/GithubIssue/index.tsx index 8173dd25..932202d4 100644 --- a/ui/src/pages/Automation/GithubIssue/index.tsx +++ b/ui/src/pages/Automation/GithubIssue/index.tsx @@ -11,9 +11,11 @@ import { IssueType, SavedIssueType } from "./types"; import ErrorComponent from "components/General/ErrorComponent"; import DownloadCsv from "./components/DownloadCsv"; import style from "./GithubIssue.module.scss"; +import { useOnlineStatus } from "hooks/useOnlineStatus"; const GithubIssue: React.FC = () => { //? input state + const isOnline = useOnlineStatus(); const [owner, setOwner] = useState(""); const [repo, setRepo] = useState(""); const [token, setToken] = useState(""); @@ -130,11 +132,16 @@ const GithubIssue: React.FC = () => { diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss index 5a21cfd9..58b3be79 100644 --- a/ui/src/pages/Home/Home.module.scss +++ b/ui/src/pages/Home/Home.module.scss @@ -17,38 +17,34 @@ $home-z-index-100: 100; &__hero { display: flex; - flex-direction: row; - justify-content: space-between; - gap: var(--bt-size-100); - &_text { - display: flex; - flex: $home-number-2; - flex-direction: column; - justify-content: center; - text-align: center; - gap: var(--bt-size-10); - &_title { - text-align: left; - } - &_paragraph { - text-align: left; - max-width: $home-hero-paragraph-width; - } - } - - &_image { - flex: var(--bt-number-1); - } + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; } &__features { display: flex; align-items: center; - border-radius: var(--bt-size-8); - z-index: $home-z-index-100; + flex-direction: column; + gap: var(--bt-size-50); - &_card { - height: var(--bt-size-percent-100); + &_cover { + display: flex; + align-items: center; + } + + &_cards { + display: grid; + gap: var(--bt-size-20); + grid-template-columns: 1fr 1fr; + + &_card { + &_content { + padding: 10px; + height: var(--bt-size-percent-100); + } + } } } @@ -59,11 +55,14 @@ $home-z-index-100: 100; text-align: center; } - @media screen and (max-width: 768px) { - padding-top: var(--bt-size-64); - &__hero { - flex-direction: column; - gap: var(--bt-size-16); + @media screen and (max-width: 900px) { + &__features { + &_cover { + flex-direction: column; + } + &_cards { + grid-template-columns: 1fr; + } } } } diff --git a/ui/src/pages/Home/components/Contribution.tsx b/ui/src/pages/Home/components/Contribution.tsx index 517bf6d0..8eb81ddc 100644 --- a/ui/src/pages/Home/components/Contribution.tsx +++ b/ui/src/pages/Home/components/Contribution.tsx @@ -2,42 +2,26 @@ import React from "react"; import style from "pages/Home/Home.module.scss"; import { Space, Typography } from "antd"; import { ResponsiveButton } from "components/General/FormComponents"; +import { openLink } from "utils/helper-functions/string"; const Contribution: React.FC = () => { - const onClick = (url: string) => { - window.open(url, "_blank", "noopener"); - }; return (
Join our community - + Join our open-source community and help shape the future of Modern web - - - - onClick( - "https://github.com/lifeparticle/binarytree" - ) - } - > - Github Discussion - - - onClick( - "https://github.com/lifeparticle/binarytree/issues" - ) - } - > - Request Features - - + + + openLink("https://github.com/lifeparticle/binarytree") + } + > + Github Discussion +
); diff --git a/ui/src/pages/Home/components/Features.tsx b/ui/src/pages/Home/components/Features.tsx index aed6f075..2fafab6d 100644 --- a/ui/src/pages/Home/components/Features.tsx +++ b/ui/src/pages/Home/components/Features.tsx @@ -1,64 +1,82 @@ import React from "react"; -import { Card, Col, Row, Space, Typography } from "antd"; +import { Card, Space, Typography, Image } from "antd"; import Icon from "components/General/Icon"; import { FEATURES } from "pages/Home/utils/constants"; import style from "pages/Home/Home.module.scss"; import { Link } from "react-router-dom"; import useModal from "hooks/useModal"; import { ResponsiveButton } from "components/General/FormComponents"; +import features from "assets/Home/features.svg"; +import { openLink } from "utils/helper-functions/string"; const Features: React.FC = () => { const { handleModalOpen } = useModal(); return ( - - - - +
+ + + Get Started + + + openLink( + "https://github.com/lifeparticle/binarytree/issues" + ) + } + > + Request Features + + + +
+
+ BinaryTree comes packed with some awesome features - - For everyday development of contemporary applications, - you might require some innovative tools. BinaryTree can - streamline your application development process - - - - Get Started - - - - - - - {FEATURES.map((feature) => ( - - - - - - - - {feature.title} - - - {feature.description} - - + + For modern app development, tools like BinaryTree can + significantly enhance and streamline your workflow. + +
+ BinaryTree: Developer Productivity Tools +
+
+ {FEATURES.map((feature) => ( +
+ + + + + + + {feature.title} + + + {feature.description} + - - - - ))} - - - + + + +
+ ))} +
+
); }; diff --git a/ui/src/pages/Home/components/Hero.tsx b/ui/src/pages/Home/components/Hero.tsx index c2f08c99..8038385b 100644 --- a/ui/src/pages/Home/components/Hero.tsx +++ b/ui/src/pages/Home/components/Hero.tsx @@ -8,35 +8,29 @@ const { Title } = Typography; const Hero: React.FC = () => { return (
-
- - Your Mate in Software Development - - + Your Mate in Software Development + + BinaryTree: Developer Productivity Tools + + At binarytree.dev, we provide an array of developer productivity + tools designed to help you save time. With an{" "} + <a + href="https://github.com/users/lifeparticle/projects/2" + target="_blank" > - At binarytree.dev, we provide an array of developer - productivity tools designed to help you save time. With an{" "} - <a - href="https://github.com/users/lifeparticle/projects/2" - target="_blank" - > - ever-growing number of features - </a>{" "} - (currently <b>{FEATURE_DATA.length}</b>), our platform is - constantly evolving to meet the needs of developers like you - </Typography.Paragraph> - </div> - - <div className={style.home__hero_image}> - <Image - src={hero} - alt="BinaryTree: Developer Productivity Tools" - preview={false} - width={"100%"} - height={"100%"} - /> - </div> + ever-growing number of features + </a>{" "} + (currently <b>{FEATURE_DATA.length}</b>), our platform is + constantly evolving to meet the needs of developers like you +
); };