From d8f965a4efdfff400b5de55f8bc0f06b2649b319 Mon Sep 17 00:00:00 2001
From: Chee Kian Teoh <teoh4770@mylaurier.ca>
Date: Mon, 25 Mar 2024 22:26:02 -0400
Subject: [PATCH] refactor the team section

---
 src/components/index.tsx                      |   2 +-
 src/components/sections/Team/Team.section.tsx |  91 ++++++++++++++++
 .../{Team.section.tsx => Team/data.ts}        | 102 +-----------------
 3 files changed, 93 insertions(+), 102 deletions(-)
 create mode 100644 src/components/sections/Team/Team.section.tsx
 rename src/components/sections/{Team.section.tsx => Team/data.ts} (54%)

diff --git a/src/components/index.tsx b/src/components/index.tsx
index 23aea7bc..a9eb6131 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -14,7 +14,7 @@ export { Menu } from './Navbar/Menu';
  *
  */
 export { HeroStatSection } from './sections/HeroStats.section';
-export { TeamSection } from './sections/Team.section';
+export { TeamSection } from './sections/Team/Team.section';
 export { ContactSection } from './sections/Contact.section';
 export { FooterSection } from './sections/Footer.section';
 export { SponsorFAQSection } from './sections/SponsorFAQ.section';
\ No newline at end of file
diff --git a/src/components/sections/Team/Team.section.tsx b/src/components/sections/Team/Team.section.tsx
new file mode 100644
index 00000000..b3dfd713
--- /dev/null
+++ b/src/components/sections/Team/Team.section.tsx
@@ -0,0 +1,91 @@
+import { departments } from './data';
+
+interface Member {
+    name: string;
+    title: string;
+    profile: string;
+}
+
+interface DepartmentProps {
+    title: string;
+    members: Member[];
+}
+
+const Department: React.FC<DepartmentProps> = ({ title, members }) => {
+    return (
+        <div className="department">
+            <h3 className="mb-6 text-3xl font-bold capitalize md:mb-8">
+                {title}
+            </h3>
+            <ul className="grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8">
+                {members.map((member, index) => (
+                    <li key={index} className="flex items-center gap-x-4">
+                        <img
+                            className="aspect-square w-20 rounded-full object-cover lg:w-32"
+                            src={member.profile}
+                            alt={title}
+                        />
+
+                        <div>
+                            <p className="text-lg font-extrabold lg:text-2xl">
+                                {member.name}
+                            </p>
+                            <p className="text-base font-normal lg:text-lg">
+                                {member.title}
+                            </p>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+const TeamSection = () => {
+    return (
+        <section
+            id="team-section"
+            className="relative isolate overflow-hidden bg-[#9f7eca] p-5 md:p-8 lg:p-12"
+        >
+            {/* top images */}
+            <div className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32">
+                <img
+                    className="mx-auto w-full max-w-fit sm:hidden"
+                    src="src/assets/team/meet-the-team-banner.webp"
+                    alt=""
+                />
+                <img
+                    className="mx-auto hidden w-full max-w-[70rem] sm:block"
+                    src="src/assets/team/meet-the-team-balloon-banner.webp"
+                    alt=""
+                />
+                <img
+                    className="absolute bottom-0 z-10  hidden translate-y-1/2 sm:block"
+                    src="src/assets/team/clouds.svg"
+                    alt=""
+                />
+            </div>
+
+            {/* right building image */}
+            <img
+                className="absolute right-0 -z-10 hidden translate-x-1/3 lg:block 2xl:translate-x-32"
+                src="src/assets/team/meet-the-team-building-right.svg"
+                alt=""
+            />
+            {/* left building image */}
+            <img
+                className="absolute bottom-0 left-0 -z-10 hidden -translate-x-1/3 translate-y-1/2 lg:block 2xl:translate-y-[30%]"
+                src="src/assets/team/meet-the-team-building-left.svg"
+                alt=""
+            />
+
+            <div className="mx-auto max-w-7xl space-y-12 pb-64 lg:pb-96">
+                {departments.map((department) => (
+                    <Department {...department} key={department.title} />
+                ))}
+            </div>
+        </section>
+    );
+};
+
+export { TeamSection };
diff --git a/src/components/sections/Team.section.tsx b/src/components/sections/Team/data.ts
similarity index 54%
rename from src/components/sections/Team.section.tsx
rename to src/components/sections/Team/data.ts
index 4d367442..f3e89713 100644
--- a/src/components/sections/Team.section.tsx
+++ b/src/components/sections/Team/data.ts
@@ -1,16 +1,3 @@
-interface Member {
-    name: string;
-    title: string;
-    profile: string;
-}
-
-interface MemberProps extends Member {}
-
-interface DepartmentProps {
-    title: string;
-    members: Member[];
-}
-
 const departments = [
     {
         title: 'design',
@@ -144,91 +131,4 @@ const departments = [
     },
 ];
 
-const Member: React.FC<MemberProps> = ({ name, title, profile }) => {
-    return (
-        // ?width can be fixed (84 when small, 128 when big or large viewport) (done)
-        <li className="flex items-center gap-x-4">
-            <img
-                className="aspect-square w-20 rounded-full object-cover lg:w-32"
-                src={profile}
-                alt={title}
-            />
-
-            <div>
-                <p className="text-lg lg:text-2xl font-extrabold">{name}</p>
-                <p className="text-base lg:text-lg font-normal">{title}</p>
-            </div>
-        </li>
-    );
-};
-
-const Department: React.FC<DepartmentProps> = ({ title, members }) => {
-    return (
-        <div className="department">
-            <h3 className="mb-6 text-3xl font-bold capitalize md:mb-8">
-                {title}
-            </h3>
-            <ul className="grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8">
-                {members.map((member, index) => (
-                    <Member
-                        {...member}
-                        key={`${index}-${member.name}-${member.title}`}
-                    />
-                ))}
-            </ul>
-        </div>
-    );
-};
-
-const TeamSection = () => {
-    return (
-        // should have decide the consistent padding
-        // or right now, i can focus on the section and increase the padding
-        <section
-            id="team-section"
-            className="relative isolate overflow-hidden bg-[#9f7eca] p-5 md:p-8 lg:p-12"
-        >
-            {/* image at the top */}
-            <div className="relative mx-auto mb-10 sm:mb-24 w-fit lg:mb-32">
-                {/* keep the banner only in mobile view */}
-                {/* keep the balloon after mobile view */}
-                <img
-                    className="mx-auto w-full max-w-fit sm:hidden"
-                    src="src/assets/team/meet-the-team-banner.webp"
-                    alt=""
-                />
-                <img
-                    className="mx-auto hidden w-full max-w-[70rem] sm:block"
-                    src="src/assets/team/meet-the-team-balloon-banner.webp"
-                    alt=""
-                />
-                <img
-                    className="absolute bottom-0 translate-y-1/2  z-10 hidden sm:block"
-                    src="src/assets/team/clouds.svg"
-                    alt=""
-                />
-            </div>
-
-            {/* right building image */}
-            <img
-                className="absolute right-0 -z-10 hidden translate-x-1/3 lg:block 2xl:translate-x-32"
-                src="src/assets/team/meet-the-team-building-right.svg"
-                alt=""
-            />
-            {/* left building image */}
-            <img
-                className="absolute bottom-0 left-0 -z-10 hidden -translate-x-1/3 translate-y-1/2 lg:block 2xl:translate-y-[30%]"
-                src="src/assets/team/meet-the-team-building-left.svg"
-                alt=""
-            />
-
-            <div className="mx-auto max-w-[1328px] space-y-12 pb-80">
-                {departments.map((department) => (
-                    <Department {...department} key={department.title} />
-                ))}
-            </div>
-        </section>
-    );
-};
-
-export { TeamSection };
+export { departments };