From 348ff92fa9ae9d5b731108cdd83323910040cc81 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Thu, 14 Dec 2023 16:27:53 +0530 Subject: [PATCH] Implement tabs functionality in project details page (#2) * Add navigation for project page * Use tab component for switching panels * Get project details only on id changes --------- Co-authored-by: neeraj --- packages/frontend/package.json | 1 + packages/frontend/src/assets/projects.json | 12 ++- .../frontend/src/components/ProjectCard.tsx | 6 +- packages/frontend/src/components/Tab.tsx | 80 +++++++++++++++++++ .../frontend/src/pages/projects/Create.tsx | 2 +- .../frontend/src/pages/projects/Project.tsx | 31 ++++++- yarn.lock | 15 +++- 7 files changed, 137 insertions(+), 10 deletions(-) create mode 100644 packages/frontend/src/components/Tab.tsx diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 5d02f88c..4c9bd7c5 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -16,6 +16,7 @@ "react-hook-form": "^7.49.0", "react-router-dom": "^6.20.1", "react-scripts": "5.0.1", + "react-tabs": "^6.0.2", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, diff --git a/packages/frontend/src/assets/projects.json b/packages/frontend/src/assets/projects.json index 450c401a..fa50a0a0 100644 --- a/packages/frontend/src/assets/projects.json +++ b/packages/frontend/src/assets/projects.json @@ -1,5 +1,6 @@ [ { + "id": 1, "icon": "^", "title": "iglotools", "domain": "iglotools.com", @@ -10,9 +11,10 @@ } }, { + "id": 2, "icon": "^", - "title": "iglotools", - "domain": "iglotools.com", + "title": "snowball-starter-kit", + "domain": "snowball-starter-kit.com", "latestCommit": { "message": "404 added", "time": "2023-12-11T04:20:00", @@ -20,9 +22,10 @@ } }, { + "id": 3, "icon": "^", - "title": "iglotools", - "domain": "iglotools.com", + "title": "passkeys-demo", + "domain": "passkeys-demo.com", "latestCommit": { "message": "Design system integrated", "time": "2023-12-11T04:20:00", @@ -30,6 +33,7 @@ } }, { + "id": 4, "icon": "^", "title": "watcher-tool", "domain": "azimuth-watcher.com", diff --git a/packages/frontend/src/components/ProjectCard.tsx b/packages/frontend/src/components/ProjectCard.tsx index 86f2f47a..599cc6ba 100644 --- a/packages/frontend/src/components/ProjectCard.tsx +++ b/packages/frontend/src/components/ProjectCard.tsx @@ -1,10 +1,12 @@ import React from 'react'; import { DateTime } from 'luxon'; +import { Link } from 'react-router-dom'; interface projectDetails { icon: string; title: string; domain: string; + id: number; latestCommit: { [key: string]: string; }; @@ -20,7 +22,9 @@ const ProjectCard: React.FC = ({ project }) => {
{project.icon}
-

{project.title}

+ + {project.title} +

{project.domain}

...
diff --git a/packages/frontend/src/components/Tab.tsx b/packages/frontend/src/components/Tab.tsx new file mode 100644 index 00000000..ae4a4076 --- /dev/null +++ b/packages/frontend/src/components/Tab.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; + +const Overview = () => ( +
+ Content of overview tab +

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. +

+
+); +const Deployments = () => ( +
+ Content of deployments tab +

+ Contrary to popular belief, Lorem Ipsum is not simply random text. +

+
+); +const Database = () => ( +
+ Content of database tab +

+ It is a long established fact that a reader will be distracted by the + readable content of a page when looking at its layout. +

+
+); +const Integrations = () => ( +
+ Content of integrations tab +

+ There are many variations of passages of Lorem Ipsum available. +

+
+); +const Settings = () => ( +
+ Content of settings tab +

+ It uses a dictionary of over 200 Latin words, combined with a handful of + model sentence. +

+
+); + +const ProjectTab = () => { + return ( + + + Overview + Deployments + Database + Integrations + Settings + + + + + + + + + + + + + + + + + + ); +}; + +export default ProjectTab; diff --git a/packages/frontend/src/pages/projects/Create.tsx b/packages/frontend/src/pages/projects/Create.tsx index a491bb5c..3bad26e2 100644 --- a/packages/frontend/src/pages/projects/Create.tsx +++ b/packages/frontend/src/pages/projects/Create.tsx @@ -6,7 +6,7 @@ import TemplateCard from '../../components/TemplateCard'; import RepositoryList from '../../components/RepositoryList'; import ConnectAccount from '../../components/ConnectAccount'; -const isGitAuth = false; +const isGitAuth = true; const CreateProject = () => { return ( diff --git a/packages/frontend/src/pages/projects/Project.tsx b/packages/frontend/src/pages/projects/Project.tsx index 0b98f12e..a8d8edcc 100644 --- a/packages/frontend/src/pages/projects/Project.tsx +++ b/packages/frontend/src/pages/projects/Project.tsx @@ -1,10 +1,35 @@ -import React from 'react'; -import { useParams } from 'react-router-dom'; +import React, { useMemo } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; + +import HorizontalLine from '../../components/HorizontalLine'; +import projects from '../../assets/projects.json'; +import ProjectTab from '../../components/Tab'; + +const getProject = (id: number) => { + return projects.find((project) => { + return project.id === id; + }); +}; const Project = () => { const { id } = useParams(); + const navigate = useNavigate(); + const project = useMemo(() => getProject(Number(id)), [id]); - return
Project page: {id}
; + return ( +
+
+ +

{project?.title}

+ + +
+ +
+ +
+
+ ); }; export default Project; diff --git a/yarn.lock b/yarn.lock index 77016111..5bf1f727 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4048,6 +4048,11 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== +clsx@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b" + integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q== + cmd-shim@6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-6.0.1.tgz#a65878080548e1dca760b3aea1e21ed05194da9d" @@ -10012,7 +10017,7 @@ promzard@^1.0.0: dependencies: read "^2.0.0" -prop-types@^15.8.1: +prop-types@^15.5.0, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -10255,6 +10260,14 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" +react-tabs@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-6.0.2.tgz#bc1065c3828561fee285a8fd045f22e0fcdde1eb" + integrity sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ== + dependencies: + clsx "^2.0.0" + prop-types "^15.5.0" + react@^18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"