Merge pull request #83 from tk1ng/tk1ng/web-34

chore: create the join or discord and other social links section  (WEB-34)

package.json

@@ -14,7 +14,8 @@
   "dependencies": {
     "next": "14.1.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.1.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.24.0",

src/app/components/socialSection/socialLinks.tsx

@@ -0,0 +1,25 @@
+import { IconContext } from 'react-icons';
+import { SocialLinkData } from './socialSection';
+import styles from './socialSection.module.css';
+
+interface SocialLinksProps {
+  links: SocialLinkData[];
+}
+
+const SocialLinks = ({ links }: SocialLinksProps) => {
+  return (
+    <IconContext.Provider value={{ color: 'black', size: '7rem' }}>
+      <ul className={styles.socialLinks}>
+        {links.map((link) => (
+          <li key={link.id}>
+            <a href={link.link} target='_blank'>
+              {link.icon}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </IconContext.Provider>
+  );
+};
+
+export default SocialLinks;

src/app/components/socialSection/socialSection.module.css

@@ -0,0 +1,35 @@
+.socialSection {
+  display: flex;
+  gap: 4rem;
+  align-items: center;
+  padding: 60px 60px 60px 0;
+}
+
+.socialSection p {
+  font-family: 'Raleway', sans-serif;
+  font-size: 55px;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  width: 50%;
+  height: 500px;
+  background-color: #0f1034;
+  border-radius: 0 30px 30px 0;
+}
+
+.imageContainer img {
+  border-radius: 0 15px 15px 0;
+  width: 93%;
+  height: 90%;
+}
+
+.socialLinks {
+  display: flex;
+  gap: 2.5rem;
+  justify-content: space-evenly;
+  list-style: none;
+  padding: 0;
+}

src/app/components/socialSection/socialSection.test.js

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import SocialSection from './socialSection';
+
+describe('SocialSection', () => {
+  const mockData = [
+    {
+      id: 'github',
+      imgSrc: '/assets/githubIcon.png',
+      alt: 'Github social icon',
+      link: 'https://github.com',
+    },
+    {
+      id: 'discord',
+      imgSrc: '/assets/discordIcon.png',
+      alt: 'Discord social icon',
+      link: 'https://discord.com',
+    },
+    {
+      id: 'meetup',
+      imgSrc: '/assets/meetupIcon.png',
+      alt: 'Meetup social icon',
+      link: '/',
+    },
+    {
+      id: 'linkedin',
+      imgSrc: '/assets/linkedinIcon.png',
+      alt: 'LinkedIn social icon',
+      link: '/',
+    },
+  ];
+
+  test('renders SocialSection component', () => {
+    render(<SocialSection socialData={mockData} />);
+
+    const socialSection = screen.getByTestId('socialSection');
+    expect(socialSection).toBeInTheDocument();
+  });
+
+  test('renders all social icons', () => {
+    render(<SocialSection socialData={mockData} />);
+
+    const linkList = screen.getAllByRole('listitem');
+    expect(linkList).toHaveLength(4);
+  });
+});

src/app/components/socialSection/socialSection.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import SocialLinks from './socialLinks';
+import styles from './socialSection.module.css';
+
+export interface SocialLinkData {
+  id: string;
+  icon: React.ReactNode;
+  imgSrc: string;
+  alt: string;
+  link: string;
+}
+
+interface SocialSectionProps {
+  socialData: SocialLinkData[];
+}
+
+export default function SocialSection({ socialData }: SocialSectionProps) {
+  return (
+    <div className={styles.socialSection} data-testid='socialSection'>
+      <div className={styles.imageContainer}>
+        <Image
+          src='/assets/joinOurDiscord.png'
+          alt=''
+          width={500}
+          height={350}
+        />
+      </div>
+      <div>
+        <p>
+          Join our Discord and <br /> other social links!
+        </p>
+        <p>
+          This is YOUR community,
+          <br /> be a part of it!
+        </p>
+        <SocialLinks links={socialData} />
+      </div>
+    </div>
+  );
+}

src/app/hooks/useMediaQuery/README.md

@@ -0,0 +1,7 @@
+This is a slimmer version of the `useMediaQuery` hook from [useHooks-ts](https://usehooks-ts.com/react-hook/use-media-query)
+
+This hook uses the [`matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) method of the `Window` object to check for matching conditions against a media query passed into the hook.
+
+`useMediaQuery` takes a media query argument passed as a string:
+
+`useMediaQuery('(max-width: 750px)')`

src/app/hooks/useMediaQuery/index.tsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+const useMediaQuery = (query: string): boolean => {
+  const [isMatch, setIsMatch] = useState<boolean>(false);
+
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+    setIsMatch(mediaQueryList.matches);
+
+    mediaQueryList.onchange = (event) => {
+      setIsMatch(event.matches);
+    };
+  }, [query]);
+
+  return isMatch;
+};
+
+export default useMediaQuery;

src/app/page.tsx

@@ -1,7 +1,11 @@
+'use client';
+import { FaDiscord, FaGithub, FaLinkedin, FaMeetup } from 'react-icons/fa';
+import useMediaQuery from './hooks/useMediaQuery';
 import CardsSection from './components/cardsSection/cardsSection';
 import BannerSection from './components/bannerSection/bannerSection';
 import HeroSection from './components/heroSection/heroSection';
 import Navbar from './components/navbar/navbar';
+import SocialSection from './components/socialSection/socialSection';
 import styles from './page.module.css';
 import GroupPhotoSection from './components/groupPhotoSection/groupPhotoSection';
 import BentoSection from './components/bentoSection/bentoSection';
@@ -35,14 +39,51 @@ export default function Home() {
     meetupUrl: 'https://www.meetup.com/dallas-software-developers-meetup/',
     communityUrl: '/',
     cohortUrl: '/',
+    githubUrl: 'https://github.com/dallassoftwaredevelopers',
+    discordUrl: '/',
+    linkedinUrl: 'https://www.linkedin.com/company/dallas-software-developers',
   };
 
+  const socialData = [
+    {
+      id: 'github',
+      icon: <FaGithub />,
+      imgSrc: '/assets/githubIcon.png',
+      alt: 'Github social icon',
+      link: labelMap.githubUrl,
+    },
+    {
+      id: 'discord',
+      icon: <FaDiscord />,
+      imgSrc: '/assets/discordIcon.png',
+      alt: 'Discord social icon',
+      link: labelMap.discordUrl,
+    },
+    {
+      id: 'meetup',
+      icon: <FaMeetup />,
+      imgSrc: '/assets/meetupIcon.png',
+      alt: 'Meetup social icon',
+      link: labelMap.meetupUrl,
+    },
+    {
+      id: 'linkedin',
+      icon: <FaLinkedin />,
+      imgSrc: '/assets/linkedinIcon.png',
+      alt: 'LinkedIn social icon',
+      link: labelMap.linkedinUrl,
+    },
+  ];
+
+  const isDesktop = useMediaQuery('(min-width: 1024px)');
+
   return (
     <main className={styles.main}>
       <Navbar label={labelMap} />
       <HeroSection label={labelMap.lblHero} />
       <BannerSection label={labelMap} />
       <CardsSection label={labelMap} />
+      {isDesktop && <SocialSection socialData={socialData} />}
       <GroupPhotoSection label='' />
       <BentoSection />
     </main>