From 8bb9a691a7cfdd5783c0d8823051a0ae77cc335b Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 16 Feb 2024 13:53:56 -0500 Subject: [PATCH 1/8] add: import images for team section --- src/assets/team/clouds.svg | 62 +++++ .../team/meet-the-team-balloon-banner.svg | 93 +++++++ .../team/meet-the-team-building-left.svg | 117 +++++++++ .../team/meet-the-team-building-right.svg | 246 ++++++++++++++++++ 4 files changed, 518 insertions(+) create mode 100644 src/assets/team/clouds.svg create mode 100644 src/assets/team/meet-the-team-balloon-banner.svg create mode 100644 src/assets/team/meet-the-team-building-left.svg create mode 100644 src/assets/team/meet-the-team-building-right.svg diff --git a/src/assets/team/clouds.svg b/src/assets/team/clouds.svg new file mode 100644 index 00000000..3de67486 --- /dev/null +++ b/src/assets/team/clouds.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/team/meet-the-team-balloon-banner.svg b/src/assets/team/meet-the-team-balloon-banner.svg new file mode 100644 index 00000000..d68eaf9f --- /dev/null +++ b/src/assets/team/meet-the-team-balloon-banner.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/team/meet-the-team-building-left.svg b/src/assets/team/meet-the-team-building-left.svg new file mode 100644 index 00000000..56a7286b --- /dev/null +++ b/src/assets/team/meet-the-team-building-left.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/team/meet-the-team-building-right.svg b/src/assets/team/meet-the-team-building-right.svg new file mode 100644 index 00000000..53feee20 --- /dev/null +++ b/src/assets/team/meet-the-team-building-right.svg @@ -0,0 +1,246 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 422ff66814c66a9c9e99d5f53a0f73362e821440 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 16 Feb 2024 13:54:57 -0500 Subject: [PATCH 2/8] css: add grid utilities --- src/index.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/index.css b/src/index.css index 9d89bbdd..f1a44094 100644 --- a/src/index.css +++ b/src/index.css @@ -51,3 +51,44 @@ body { @apply hover:underline focus:text-[#2B6469]; } } + +@layer utilities { + .grid-auto-xs, + .grid-auto-sm, + .grid-auto-md, + .grid-auto-lg, + .grid-auto-xl { + display: grid; + grid-gap: var(--gap, 1.5rem); + + grid-template-columns: repeat( + auto-fill, + minmax(min(100%, var(--min)), 1fr) + ); + } + + .grid-auto-xs { + --gap: 0.8rem; + --min: 8ch; + } + + .grid-auto-sm { + --gap: 1rem; + --min: 10ch; + } + + .grid-auto-md { + --gap: 1.5rem; + --min: 15ch; + } + + .grid-auto-lg { + --gap: 2rem; + --min: 20ch; + } + + .grid-auto-xl { + --gap: 2.5rem; + --min: 25ch; + } +} From 3261e4bca39677a2a759e76a326d7f9d857c6ecb Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 16 Feb 2024 13:55:11 -0500 Subject: [PATCH 3/8] add: team section --- src/components/index.tsx | 7 +- src/components/sections/Team.section.tsx | 221 +++++++++++++++++++++++ src/pages/Landing.tsx | 4 +- 3 files changed, 228 insertions(+), 4 deletions(-) create mode 100644 src/components/sections/Team.section.tsx diff --git a/src/components/index.tsx b/src/components/index.tsx index fa766c2c..c12901c0 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,11 +1,12 @@ /* * - * @component + * @component * */ /* * - * @section + * @section * - */ \ No newline at end of file + */ +export { TeamSection } from './sections/team.section'; diff --git a/src/components/sections/Team.section.tsx b/src/components/sections/Team.section.tsx new file mode 100644 index 00000000..2d47cb3d --- /dev/null +++ b/src/components/sections/Team.section.tsx @@ -0,0 +1,221 @@ +interface Member { + name: string; + title: string; + profile: string; +} + +interface Department { + title: string; + members: Member[]; +} + +const departments = [ + { + title: 'design', + members: [ + { + name: 'John Doe John Doe John Doe', + title: 'Designer', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Jane Smith', + title: 'Senior Designer', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'John Doe', + title: 'Designer', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Jane Smith', + title: 'Senior Designer', + profile: 'https://placehold.co/600x400/png', + }, + ], + }, + { + title: 'development', + members: [ + { + name: 'David Davis', + title: 'Software Engineer', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Eva Evans', + title: 'Frontend Developer', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Frank Franklin', + title: 'Backend Developer', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Grace Gray', + title: 'Full Stack Developer', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Henry White', + title: 'DevOps Engineer', + profile: 'https://placehold.co/600x400/png', + }, + ], + }, + { + title: 'operation', + members: [ + { + name: 'Oliver Black', + title: 'Operations Manager', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Patricia Green', + title: 'Operations Coordinator', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Quincy Grey', + title: 'Logistics Specialist', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Rachel Red', + title: 'Facilities Manager', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Samuel Yellow', + title: 'IT Support', + profile: 'https://placehold.co/600x400/png', + }, + ], + }, + { + title: 'logistic', + members: [ + { + name: 'Logistic Member 1', + title: 'Logistic Specialist', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Logistic Member 2', + title: 'Logistic Coordinator', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Logistic Member 3', + title: 'Logistic Analyst', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Logistic Member 4', + title: 'Logistic Supervisor', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Logistic Member 5', + title: 'Logistic Manager', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Logistic Member 3', + title: 'Logistic Analyst', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Logistic Member 4', + title: 'Logistic Supervisor', + profile: 'https://placehold.co/600x400/png', + }, + { + name: 'Logistic Member 5', + title: 'Logistic Manager', + profile: 'https://placehold.co/600x400/png', + }, + ], + }, +]; + +const Member: React.FC = ({ name, title, profile }) => { + return ( +
  • + {title} + +
    +

    + {name} +

    +

    + {title} +

    +
    +
    • + ); +}; + +const Department: React.FC = ({ title, members }) => { + return ( +
    +

    + {title} +

    +
      + {members.map((member, index) => ( + + ))} +
    +
    + ); +}; + +const TeamSection = () => { + return ( +
    +
    + + +
    + + + + + +
    + {departments.map((department) => ( + + ))} +
    +
    + ); +}; + +export { TeamSection }; diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx index adf59fa1..6d52c974 100644 --- a/src/pages/Landing.tsx +++ b/src/pages/Landing.tsx @@ -1,7 +1,9 @@ +import { TeamSection } from '@components'; + const Landing: React.FC = () => { return (
    - +
    ); }; From 56be28c3fd39c726146c2a99c2d41ba3680d3156 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 16 Feb 2024 14:05:17 -0500 Subject: [PATCH 4/8] fix: adjust the clouds position --- src/components/sections/Team.section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sections/Team.section.tsx b/src/components/sections/Team.section.tsx index 2d47cb3d..b5bccc50 100644 --- a/src/components/sections/Team.section.tsx +++ b/src/components/sections/Team.section.tsx @@ -191,7 +191,7 @@ const TeamSection = () => { alt="" /> From e225532777bbdda16b502621d17fe78a42285598 Mon Sep 17 00:00:00 2001 From: jc <46619361+juancwu@users.noreply.github.com> Date: Wed, 21 Feb 2024 18:07:12 -0500 Subject: [PATCH 5/8] fix typo in team section import --- src/components/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/index.tsx b/src/components/index.tsx index bcaa2b7a..eedd5f67 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -12,11 +12,12 @@ export { Menu } from './Navbar/Menu'; * @section * */ -export { TeamSection } from './sections/team.section'; +export { TeamSection } from './sections/Team.section'; /* * * @section FooterSection * */ -export { FooterSection } from './sections/Footer.section'; \ No newline at end of file +export { FooterSection } from './sections/Footer.section'; + From 6d89c8869216986259f33afa690c31615fbca349 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Wed, 21 Feb 2024 19:28:12 -0500 Subject: [PATCH 6/8] refactor: using proper naming for the prop types!!! --- src/components/sections/Team.section.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/sections/Team.section.tsx b/src/components/sections/Team.section.tsx index b5bccc50..e688ac4f 100644 --- a/src/components/sections/Team.section.tsx +++ b/src/components/sections/Team.section.tsx @@ -4,7 +4,9 @@ interface Member { profile: string; } -interface Department { +interface MemberProp extends Member {} + +interface DepartmentProp { title: string; members: Member[]; } @@ -142,7 +144,7 @@ const departments = [ }, ]; -const Member: React.FC = ({ name, title, profile }) => { +const Member: React.FC = ({ name, title, profile }) => { return (
  • = ({ name, title, profile }) => { ); }; -const Department: React.FC = ({ title, members }) => { +const Department: React.FC = ({ title, members }) => { return (

    From 89d9b30d558ca4e385a423d215527b3c96554eda Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Wed, 21 Feb 2024 20:23:34 -0500 Subject: [PATCH 7/8] refactor: naming the prop types correctly --- src/components/sections/Team.section.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/sections/Team.section.tsx b/src/components/sections/Team.section.tsx index e688ac4f..7529151b 100644 --- a/src/components/sections/Team.section.tsx +++ b/src/components/sections/Team.section.tsx @@ -4,9 +4,9 @@ interface Member { profile: string; } -interface MemberProp extends Member {} +interface MemberProps extends Member {} -interface DepartmentProp { +interface DepartmentProps { title: string; members: Member[]; } @@ -144,7 +144,7 @@ const departments = [ }, ]; -const Member: React.FC = ({ name, title, profile }) => { +const Member: React.FC = ({ name, title, profile }) => { return (
  • = ({ name, title, profile }) => { ); }; -const Department: React.FC = ({ title, members }) => { +const Department: React.FC = ({ title, members }) => { return (

    From 6cefbde9e800012a8a6d1ae0553f91c58ff16604 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh <98545971+teoh4770@users.noreply.github.com> Date: Sat, 24 Feb 2024 15:47:13 -0500 Subject: [PATCH 8/8] Remove key prop from department Co-authored-by: Jc <46619361+juancwu@users.noreply.github.com> --- src/components/sections/Team.section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sections/Team.section.tsx b/src/components/sections/Team.section.tsx index 7529151b..63000a86 100644 --- a/src/components/sections/Team.section.tsx +++ b/src/components/sections/Team.section.tsx @@ -167,7 +167,7 @@ const Member: React.FC = ({ name, title, profile }) => { const Department: React.FC = ({ title, members }) => { return ( -
    +

    {title}