Opensource page fixes (WeMakeDevs#698)

* feat: link suppport in faq answer

* content: add more testimonial for the open source

* feat: resource btn and faq in opensource course page

* style: Accordian item props destructure

src/components/Accordion/AccordionItem.jsx

@@ -3,10 +3,13 @@ import { FaMinus, FaPlus } from 'react-icons/fa';
 
 import clsxm from '@/lib/utils';
 
+import { HeaderLink } from '@/components/links';
+
 const AccordionItem = ({
  index,
  question,
  answer,
+ link,
  activeItem,
  setActiveItem,
 }) => {
@@ -39,7 +42,18 @@ const AccordionItem = ({
  : { maxHeight: '0px' }
  }
  >
- <div className='max-h-max py-6 px-3'>{answer}</div>
+ <div className='max-h-max py-6 px-3'>
+ {answer}{' '}
+ {link && (
+ <HeaderLink
+ openNewTab
+ className='text-indigo-300 after:h-[2px] after:bg-white'
+ href={link.href}
+ >
+ {link.title}
+ </HeaderLink>
+ )}
+ </div>
  </div>
  </div>
  );

src/components/Accordion/index.jsx

@@ -11,10 +11,9 @@ const Accordion = ({ data }) => {
  <AccordionItem
  key={item.id}
  index={index}
- question={item.question}
- answer={item.answer}
  activeItem={activeItem}
  setActiveItem={setActiveItem}
+ {...item}
  />
  ))}
  </div>

src/content/courses/opensource.js

@@ -111,6 +111,10 @@ const OpenSourcePageContent = {
  text: 'Assignments',
  link: 'https://github.com/WeMakeDevs/open-source-course',
  },
+ {
+ text: 'Resources',
+ link: 'https://github.com/WeMakeDevs/roadmaps',
+ },
  ],
  },
  learninpublic: [
@@ -161,9 +165,13 @@ const OpenSourcePageContent = {
  },
  {
  id: 'FAQ6',
- question: 'Do you provide mentorship and guidance?',
+ question: 'How do I find resources to upskill myself in tech stacks?',
  answer:
- 'Yes. That is the highlight of our community. Get expert guidance from industry experts from around the world. You can learn more and get inspired by their stories and roadmaps via the podcast Open Source Cafe.',
+ 'We the roadmaps repository which contains curated resources for various tech stacks. You can find it at',
+ link: {
+ title: ' roadmaps.',
+ href: 'https://github.com/WeMakeDevs/roadmaps',
+ },
  },
  ],
 };

src/content/opensource/index.js

@@ -65,3 +65,15 @@ export const OpensourcePageContent = {
  ],
  faq: OpensourcePageFAQ,
 };
+
+export const opensourcetweet = [
+ '1537416341245681665',
+ '1656911832811184129',
+ '1656561217442562051',
+ '1656959959450394624',
+ '1656141618129547264',
+ '1658437060833968129',
+ '1655812888387530753',
+ '1654231459723644929',
+ '1674400245403328513',
+];

src/pages/OpenSourceCoursePage.jsx

@@ -8,6 +8,8 @@ import {
 
 import clsxm from '@/lib/utils';
 
+import { opensourcetweet } from '@/content/opensource';
+
 import {
  Footer,
  JoinUs,
@@ -21,15 +23,7 @@ import { ArrowLink, ButtonLink, HeaderLink } from '@/components/links';
 import OpenSourceHeroImg from '@/assets/courses/opensource.avif';
 
 const OpenSourcePage = ({ content }) => {
- const [tweetId, setTweetId] = useState([
- '1537416341245681665',
- '1656911832811184129',
- '1656561217442562051',
- '1656959959450394624',
- '1656141618129547264',
- '1658437060833968129',
- '1655812888387530753',
- ]);
+ const [tweetId, setTweetId] = useState(opensourcetweet);
  const [copied, setCopied] = useState(false);
  const copyHashtag = () => {
  navigator.clipboard.writeText('#OpenSourceWithKunal');
@@ -69,7 +63,7 @@ const OpenSourcePage = ({ content }) => {
  </span>
  </h1>
  <iframe
- src='https://www.youtube.com/embed/msyGybzCKRs'
+ src='https://www.youtube.com/embed/inZUgh8p1d4'
  title='YouTube video player'
  allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
  allowfullscreen

src/pages/OpenSourcePage.jsx

@@ -1,20 +1,14 @@
 import { useState } from 'react';
 
+import { opensourcetweet } from '@/content/opensource';
+
 import Layout, { Testimonials } from '@/components/layout';
 import About from '@/components/PageComp/OpenSourcePage/About';
 import Header from '@/components/PageComp/OpenSourcePage/Header';
 import OurProjects from '@/components/PageComp/OpenSourcePage/OurProjects';
 
 const OpenSourcePage = ({ content }) => {
- const [tweetId, setTweetId] = useState([
- '1537416341245681665',
- '1656911832811184129',
- '1656561217442562051',
- '1656959959450394624',
- '1656141618129547264',
- '1658437060833968129',
- '1655812888387530753',
- ]);
+ const [tweetId, setTweetId] = useState(opensourcetweet);
 
  return (
  <Layout content={content}>