home page

ui/src/components/General/Beam/index.tsx → 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<BeamProps> = ({ beamObject }) => {
+const Drawer: React.FC<DrawerProps> = ({ 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<BeamProps> = ({ beamObject }) => {
 					<Icon name="ChevronRight" />
 				</span>
 			</Space>
-			<Drawer
-				title="Navigate related routes"
+			<AntDDrawer
+				title="Tools"
 				placement={"right"}
 				width={300}
 				onClose={onClose}
@@ -69,9 +69,9 @@ const Beam: React.FC<BeamProps> = ({ beamObject }) => {
 						</ResponsiveButton>
 					))}
 				</Space>
-			</Drawer>
+			</AntDDrawer>
 		</div>
 	);
 };
 
-export default Beam;
+export default Drawer;

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 = <T extends object>(
 	WrappedComponent: React.ComponentType<T>
@@ -55,7 +55,7 @@ const withPageTitle = <T extends object>(
 					</ErrorBoundary>
 					<ErrorBoundary FallbackComponent={FallbackComponent}>
 						{beamObject.length > 0 && (
-							<Beam beamObject={beamObject} />
+							<Drawer beamObject={beamObject} />
 						)}
 						<WrappedComponent {...props} />
 					</ErrorBoundary>

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
+	);
+}

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 = () => {
 							</Upload>
 						</Form.Item>
 						<Button
-							disabled={fileData.length === 0 && !isValidInput}
+							disabled={
+								!isOnline ||
+								(fileData.length === 0 && !isValidInput)
+							}
 							block
 							onClick={handleCreateGitHubIssue}
 						>
-							Create {fileData?.length} issue
+							{isOnline
+								? `Create ${fileData?.length} issue`
+								: `Connecting...`}
 						</Button>
 					</InputGrid>
 				</Form>

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;
+			}
 		}
 	}
 }

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 (
 		<section className={style.home__contribution}>
 			<Space direction="vertical">
 				<Typography.Title level={2}>
 					Join our community
 				</Typography.Title>
-				<Typography.Text>
+				<Typography.Paragraph>
 					Join our open-source community and help shape the future of
 					Modern web
-				</Typography.Text>
-				<Space direction="horizontal">
-					<ResponsiveButton
-						type="primary"
-						onClick={() =>
-							onClick(
-								"https://github.com/lifeparticle/binarytree"
-							)
-						}
-					>
-						Github Discussion
-					</ResponsiveButton>
-					<ResponsiveButton
-						onClick={() =>
-							onClick(
-								"https://github.com/lifeparticle/binarytree/issues"
-							)
-						}
-					>
-						Request Features
-					</ResponsiveButton>
-				</Space>
+				</Typography.Paragraph>
+				<ResponsiveButton
+					onClick={() =>
+						openLink("https://github.com/lifeparticle/binarytree")
+					}
+				>
+					Github Discussion
+				</ResponsiveButton>
 			</Space>
 		</section>
 	);

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 (
-		<Row gutter={[16, 16]}>
-			<Col xs={24} lg={8} className={style.home__features}>
-				<Space direction="vertical">
-					<Typography.Title level={2}>
+		<div className={style.home__features}>
+			<Space direction="horizontal">
+				<ResponsiveButton onClick={handleModalOpen} type="primary">
+					Get Started
+				</ResponsiveButton>
+				<ResponsiveButton
+					onClick={() =>
+						openLink(
+							"https://github.com/lifeparticle/binarytree/issues"
+						)
+					}
+				>
+					Request Features
+				</ResponsiveButton>
+			</Space>
+
+			<div className={style.home__features_cover}>
+				<div>
+					<Typography.Title level={3}>
 						BinaryTree comes packed with some awesome features
 					</Typography.Title>
-					<Typography.Paragraph>
-						For everyday development of contemporary applications,
-						you might require some innovative tools. BinaryTree can
-						streamline your application development process
-					</Typography.Paragraph>
-
-					<ResponsiveButton onClick={handleModalOpen}>
-						Get Started
-					</ResponsiveButton>
-				</Space>
-			</Col>
-
-			<Col xs={23} lg={16}>
-				<Row gutter={[16, 16]}>
-					{FEATURES.map((feature) => (
-						<Col xs={24} md={12} lg={12} xl={8} key={feature.id}>
-							<Link to={feature.link}>
-								<Card
-									hoverable
-									className={style.home__features_card}
-								>
-									<Space direction="vertical">
-										<Icon name={feature.icon} size={40} />
-										<Space
-											direction="vertical"
-											size="middle"
-										>
-											<Typography.Title level={4}>
-												{feature.title}
-											</Typography.Title>
-											<Typography.Text>
-												{feature.description}
-											</Typography.Text>
-										</Space>
+					<Typography.Title level={4}>
+						For modern app development, tools like BinaryTree can
+						significantly enhance and streamline your workflow.
+					</Typography.Title>
+				</div>
+				<Image
+					src={features}
+					alt="BinaryTree: Developer Productivity Tools"
+					preview={false}
+					height={"40vh"}
+				/>
+			</div>
+			<div className={style.home__features_cards}>
+				{FEATURES.map((feature) => (
+					<div
+						key={feature.id}
+						className={style.home__features_cards_card}
+					>
+						<Link to={feature.link}>
+							<Card
+								bordered={false}
+								hoverable
+								className={
+									style.home__features_cards_card_content
+								}
+							>
+								<Space direction="vertical">
+									<Icon name={feature.icon} size={40} />
+									<Space direction="vertical" size="middle">
+										<Typography.Title level={4}>
+											{feature.title}
+										</Typography.Title>
+										<Typography.Text>
+											{feature.description}
+										</Typography.Text>
 									</Space>
-								</Card>
-							</Link>
-						</Col>
-					))}
-				</Row>
-			</Col>
-		</Row>
+								</Space>
+							</Card>
+						</Link>
+					</div>
+				))}
+			</div>
+		</div>
 	);
 };