Started creating the sponsors component. Need to fix a few things to …

…get it working correctly. Added a few divs to Welcome.mdx for styling purposes in styles.css.
LetsGetTechnical · Oct 4, 2024 · 2341ef5 · 2341ef5
1 parent fb86707
commit 2341ef5
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 46 deletions.
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -5,4 +5,5 @@ addons.setConfig({
     showRoots: true,
     collapsedRoots: ['about', 'technical-planning-documents'],
   },
+  layout: 'fullscreen',
 });
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -16,6 +16,7 @@ const preview: Preview = {
         { name: 'light', value: '#fff' },
       ],
     },
+    layout: 'centered',
   },
 };
 

diff --git a/stories/Sponsors.tsx b/stories/Sponsors.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import Image from 'next/image';
+
+const sponsorsArray = [
+  {
+    name: 'Appwrite',
+    logo: '/stories/assets/appwriteLogo.svg',
+    website: '#',
+  },
+  {
+    name: 'Blog Recorder',
+    logoPath: '/assets/blogRecorderLogo.svg',
+    website: '#',
+  },
+  {
+    name: 'Frontend Mentor',
+    logoPath: './assets/frontendMentorLogo.svg',
+    website: '#',
+  },
+  {
+    name: 'GitKraken',
+    logoPath: './assets/gitkrakenLogo.svg',
+    website: '#',
+  },
+  {
+    name: 'Pastel',
+    logoPath: './assets/pastelLogo.svg',
+    website: '#',
+  },
+].sort((a, b) => a.name.localeCompare(b.name));
+
+interface SponsorProps {
+  name: string;
+  logoPath: string;
+  website: string;
+}
+
+const Sponsor = ({ name, logoPath, website }) => (
+  <a
+    href={website}
+    target="_blank"
+    rel="noreferrer"
+    className="flex flex-col items-center p-4 m-2 hover:shadow-lg transition-shadow duration-300"
+  >
+    <Image
+      src={logoPath}
+      alt={`${name} logo`}
+      width={100}
+      height={100}
+      objectFit="contain"
+    />
+    <h6 className="mt-2 text-center font-semibold">{name}</h6>
+  </a>
+);
+
+const Sponsors = () => (
+  <div className="sponsors-container grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+    {sponsorsArray.map((sponsor) => (
+      <Sponsor
+        key={sponsor.name}
+        name={sponsor.name}
+        logo={sponsor.logo}
+        website={sponsor.website}
+      />
+    ))}
+  </div>
+);
+
+export default Sponsors;
diff --git a/stories/TeamMembers.tsx b/stories/TeamMembers.tsx
@@ -101,22 +101,24 @@ const TeamMembers: React.FC = () => {
   });
 
   return (
-    <div className="team-members-container m-auto py-4 grid grid-cols-1 gap-y-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div className="team-members-container m-auto grid grid-cols-1 gap-y-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
       {sortedTeamMembers.map((member) => (
         <div
           key={member.name}
-          className="flex flex-col justify-around px-2 m-auto h-28 w-48 outline outline-outline rounded duration-300 hover:outline-accent-foreground"
+          className="flex flex-col justify-around px-2 m-auto h-32 w-48 outline outline-outline rounded duration-300 hover:outline-accent-foreground"
         >
           <div>
-            <p className="font-bold">{member.name}</p>
-            <p>{member.role}</p>
+            <p className="font-semibold text-foreground text-lg">
+              {member.name}
+            </p>
+            <p className="text-muted-foreground">{member.role}</p>
             <div className="flex gap-2 pt-2">
               {member.github && (
                 <a
                   href={member.github}
                   target="_blank"
                   rel="noreferrer"
-                  className="duration-300 hover:rotate-12 hover:scale-125"
+                  className="text-muted-foreground duration-300 hover:rotate-12 hover:scale-125 hover:text-foreground hover:duration-300"
                 >
                   <FaGithub size={20} />
                 </a>
@@ -126,7 +128,7 @@ const TeamMembers: React.FC = () => {
                   href={member.linkedin}
                   target="_blank"
                   rel="noreferrer"
-                  className="duration-300 hover:rotate-12 hover:scale-125"
+                  className="text-muted-foreground duration-300 hover:rotate-12 hover:scale-125 hover:text-foreground hover:duration-300"
                 >
                   <FaLinkedin size={20} />
                 </a>
@@ -136,7 +138,7 @@ const TeamMembers: React.FC = () => {
                   href={member.twitter}
                   target="_blank"
                   rel="noreferrer"
-                  className="duration-300 hover:rotate-12 hover:scale-125"
+                  className="text-muted-foreground duration-300 hover:rotate-12 hover:scale-125 hover:text-foreground hover:duration-300"
                 >
                   <FaXTwitter size={20} />
                 </a>

diff --git a/stories/Welcome.mdx b/stories/Welcome.mdx
@@ -1,53 +1,28 @@
 import './styles.css';
 import Image from 'next/image';
 import gridironLogo from './assets/gridironSurvivorLogo.svg';
-import appwriteLogo from './assets/appwriteLogo.svg';
-import blogRecorderLogo from './assets/blogRecorderLogo.svg';
-import frontendMentorLogo from './assets/frontendMentorLogo.svg';
-import gitkrakenLogo from './assets/gitkrakenLogo.svg';
-import pastelLogo from './assets/pastelLogo.svg';
 import TeamMembers from './TeamMembers';
+import Sponsors from './Sponsors';
 import { Unstyled } from '@storybook/blocks';
 
 <Unstyled>
+<div class="dark bg-background w-full">
 <Image
   src={gridironLogo}
   alt="Gridiron Surivior Logo"
-  className="block max-w-full"
+  className="block max-w-full m-auto py-8 justify-center"
 />
 
+<div className="header">
+
 # What is Gridiron Survivor?
 
 Gridiron Survivor is the ultimate survivor league app. Track your picks, see how you stack up against your competition and hope to be crowned champion! Developed by a talented team of Junior Developers led by Senior Software Engineer Shashi Lo, Gridiron Survivor is the perfect app for any football fan looking to take their survivor league to the next level.
 
+</div>
 ## Sponsors
 
-<Image
-  src={appwriteLogo}
-  alt="Gridiron Surivior Logo"
-  className="block max-w-full"
-/>
-### Appwrite
-
-<Image
-  src={blogRecorderLogo}
-  alt="Blog Recorder Logo"
-  className="block max-w-full"
-/>
-### Blog Recorder
-
-<Image
-  src={frontendMentorLogo}
-  alt="Frontend Mentor Logo"
-  className="block max-w-full"
-/>
-### Frontend Mentor
-
-<Image src={gitkrakenLogo} alt="GitKraken Logo" className="block max-w-full" />
-### GitKraken
-
-<Image src={pastelLogo} alt="Pastel Logo" className="block max-w-full" />
-### Pastel
+<Sponsors />
 
 ## Meet the Team
 
@@ -57,4 +32,5 @@ Gridiron Survivor is the ultimate survivor league app. Track your picks, see how
   <li></li>
   <li>[Application Setup ](?path=/docs/about-application-setup--docs)</li>
 </ol>
+</div>
 </Unstyled>
diff --git a/stories/styles.css b/stories/styles.css
@@ -3,9 +3,14 @@
 @tailwind utilities;
 @import url('../app/globals.css');
 
-* {
-  padding: 0;
-  margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply text-foreground;
+  @apply py-8;
 }
 
 h1 {
@@ -37,6 +42,10 @@ p {
   @apply text-muted-foreground;
 }
 
+.header p {
+  @apply text-lg;
+}
+
 .doc_nav_links {
   display: flex;
   justify-content: space-between;
@@ -49,7 +58,3 @@ p {
 .doc_nav_links p {
   font-size: 2rem;
 }
-
-p {
-  @apply text-foreground;
-}
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ const preview: Preview = { @@
             { name: 'light', value: '#fff' },
           ],
         },
+        layout: 'centered',
       },
     };
@@ Expand Down @@