From 3a9cc20f86a7ada2bb80490cb092029850085ddc Mon Sep 17 00:00:00 2001 From: Ahmed Al-Taiar Date: Fri, 25 Oct 2024 17:34:29 -0400 Subject: [PATCH] [#1] Less cluttered projects page --- .../ContactCard/ContactCard/ContactCard.tsx | 2 +- .../components/Project/Project/Project.tsx | 4 +- .../ProjectsShowcase/ProjectsShowcase.tsx | 116 ------------------ .../ProjectsShowcaseCell.tsx | 5 +- .../ProjectsShowcaseList.tsx | 72 +++++++++++ web/src/pages/ContactPage/ContactPage.tsx | 2 +- web/src/pages/HomePage/HomePage.tsx | 2 +- .../Project/ProjectsPage/ProjectsPage.tsx | 3 +- 8 files changed, 80 insertions(+), 126 deletions(-) delete mode 100644 web/src/components/Project/ProjectsShowcase/ProjectsShowcase.tsx create mode 100644 web/src/components/ProjectsShowcaseList/ProjectsShowcaseList.tsx diff --git a/web/src/components/ContactCard/ContactCard/ContactCard.tsx b/web/src/components/ContactCard/ContactCard/ContactCard.tsx index 29e17fe..5cec9ea 100644 --- a/web/src/components/ContactCard/ContactCard/ContactCard.tsx +++ b/web/src/components/ContactCard/ContactCard/ContactCard.tsx @@ -53,7 +53,7 @@ const ContactCard = ({ portraitUrl, socials }: ContactCardProps) => { }} /> -
+
{

Images

)}
-
+
{project.images.length > 0 && project.images.map((image, i) => ( { target="_blank" rel="noreferrer" key={i} - className="rounded-xl" + className="rounded-box" > diff --git a/web/src/components/Project/ProjectsShowcase/ProjectsShowcase.tsx b/web/src/components/Project/ProjectsShowcase/ProjectsShowcase.tsx deleted file mode 100644 index ab2dcd5..0000000 --- a/web/src/components/Project/ProjectsShowcase/ProjectsShowcase.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import { useLayoutEffect, useRef, useState } from 'react' - -import { format, isAfter, startOfToday } from 'date-fns' -import parseHtml from 'react-html-parser' -import { FindProjects } from 'types/graphql' - -import { Link, routes } from '@redwoodjs/router' - -import { calculateLuminance } from 'src/lib/color' - -const CARD_WIDTH = 384 - -const ProjectsShowcase = ({ projects }: FindProjects) => { - const ref = useRef(null) - const [columns, setColumns] = useState( - Math.max( - Math.floor(ref.current?.getBoundingClientRect().width / CARD_WIDTH), - 1 - ) - ) - - useLayoutEffect(() => { - const handleResize = () => - setColumns( - Math.max( - Math.floor(ref.current?.getBoundingClientRect().width / CARD_WIDTH), - 1 - ) - ) - - handleResize() - - window.addEventListener('resize', handleResize) - - return () => window.removeEventListener('resize', handleResize) - }, []) - - return ( -
- {split( - projects - .slice() - .sort((a, b) => - isAfter(new Date(b.date), new Date(a.date)) ? 1 : -1 - ), - columns - ).map((projectChunk, i) => ( -
- {projectChunk.map((project, j) => ( - -
- {project.images.length > 0 && ( - {`${i}`} - )} -
-
-

{project.title}

-
-
-
- {parseHtml(project.description)} -
-
-
-
- {isAfter(new Date(project.date), startOfToday()) && ( -
planned
- )} -
- {format(project.date, 'yyyy-MM-dd')} -
-
-
- {project.tags.map((tag, i) => ( -
0.5 - ? 'black' - : 'white', - }} - > - {tag.tag} -
- ))} -
-
-
-
- - ))} -
- ))} -
- ) -} - -export default ProjectsShowcase - -function split(arr: T[], chunks: number): T[][] { - const result: T[][] = [] - const chunkSize = Math.ceil(arr.length / chunks) - - for (let i = 0; i < arr.length; i += chunkSize) { - result.push(arr.slice(i, i + chunkSize)) - } - - return result -} diff --git a/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx b/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx index 2a0ec96..feac98a 100644 --- a/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx +++ b/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx @@ -11,8 +11,7 @@ import { import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty' import CellFailure from 'src/components/Cell/CellFailure/CellFailure' import CellLoading from 'src/components/Cell/CellLoading/CellLoading' - -import ProjectsShowcase from '../ProjectsShowcase/ProjectsShowcase' +import ProjectsShowcaseList from 'src/components/ProjectsShowcaseList/ProjectsShowcaseList' export const QUERY: TypedDocumentNode = gql` @@ -52,6 +51,6 @@ export const Success = ({ url: routes.projects(), }} /> - + ) diff --git a/web/src/components/ProjectsShowcaseList/ProjectsShowcaseList.tsx b/web/src/components/ProjectsShowcaseList/ProjectsShowcaseList.tsx new file mode 100644 index 0000000..a7b7948 --- /dev/null +++ b/web/src/components/ProjectsShowcaseList/ProjectsShowcaseList.tsx @@ -0,0 +1,72 @@ +import { format, isAfter, startOfToday } from 'date-fns' +import parseHtml from 'react-html-parser' +import { FindProjects } from 'types/graphql' + +import { Link, routes } from '@redwoodjs/router' + +import { calculateLuminance } from 'src/lib/color' + +const ProjectsShowcaseList = ({ projects }: FindProjects) => ( +
+ {projects + .slice() + .sort((a, b) => (isAfter(new Date(b.date), new Date(a.date)) ? 1 : -1)) + .map((project, i) => ( + + {project.images.length > 0 && ( + {`${i}`} + )} +
+
+

{project.title}

+
+
+
+ {parseHtml(project.description)} +
+
+
+
+ {isAfter(new Date(project.date), startOfToday()) && ( +
planned
+ )} +
+ {format(project.date, 'yyyy-MM-dd')} +
+
+
+ {project.tags.slice(0, 3).map((tag, i) => ( +
0.5 ? 'black' : 'white', + }} + > + {tag.tag} +
+ ))} + {project.tags.length > 3 && ( +
+ +{project.tags.length - 3} +
+ )} +
+
+
+ + ))} +
+) + +export default ProjectsShowcaseList diff --git a/web/src/pages/ContactPage/ContactPage.tsx b/web/src/pages/ContactPage/ContactPage.tsx index 1a37181..d1b4fba 100644 --- a/web/src/pages/ContactPage/ContactPage.tsx +++ b/web/src/pages/ContactPage/ContactPage.tsx @@ -27,7 +27,7 @@ const ContactPage = () => { }, [width, height]) return ( -
+
) diff --git a/web/src/pages/HomePage/HomePage.tsx b/web/src/pages/HomePage/HomePage.tsx index 5161cba..016b2c7 100644 --- a/web/src/pages/HomePage/HomePage.tsx +++ b/web/src/pages/HomePage/HomePage.tsx @@ -21,7 +21,7 @@ const HomePage = () => ( }} /> -
+

diff --git a/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx b/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx index 54711ec..4d27f18 100644 --- a/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx +++ b/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx @@ -9,7 +9,7 @@ const ProjectsPage = () => {

Projects

-

+

{mobile({ tablet: true, }) @@ -20,7 +20,6 @@ const ProjectsPage = () => {

- )