feat: Implement Course Cards

.eslintrc.json

@@ -1,7 +1,9 @@
 {
-  "extends": ["next/core-web-vitals", "airbnb-base", "prettier"],
+  "extends": ["next", "next/core-web-vitals", "airbnb-base", "prettier"],
   "rules": {
-    "import/extensions": ["error", "never"],
-    "no-underscore-dangle": ["error", { "allow": ["_ref", "_id"] }]
+    "import/extensions": "off",
+    "no-underscore-dangle": ["error", { "allow": ["_ref", "_id"] }],
+    "import/prefer-default-export": "off",
+    "import/no-unresolved": "off"
   }
 }

.github/workflows/pull_request.yml

@@ -0,0 +1,24 @@
+name: Pull Request
+
+on:
+  pull_request:
+    branches: [develop]
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.9.0]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: install deps
+        run: npm install
+      - name: run unit tests
+        run: npm run test -- --watchAll=false --passWithNoTests

.gitignore

@@ -42,3 +42,5 @@ next-env.d.ts
 studio/.env.development
 
 .idea
+
+.vscode

README.md

@@ -65,13 +65,13 @@ Then set these variables in `.env.local`:
 - `NEXT_PUBLIC_SANITY_PROJECT_ID` should be the `projectId` value from [`sanity.json`].
 - `NEXT_PUBLIC_SANITY_DATASET` should be the `dataset` value from [`sanity.json`].
 - `SANITY_API_READ_TOKEN` create an API token with `read-only` permissions:
-    - Run this to open your project settings or go to https://manage.sanity.io/ and open your project:
-      ```bash
-      (cd studio && npx @sanity/cli manage)
-      ```
-    - Go to **API** and the **Tokens** section at the bottom, launch its **Add API token** button.
-    - Name it `SANITY_API_READ_TOKEN`, set **Permissions** to `Viewer`.
-    - Hit **Save** and you can copy/paste the token.
+  - Run this to open your project settings or go to https://manage.sanity.io/ and open your project:
+    ```bash
+    (cd studio && npx @sanity/cli manage)
+    ```
+  - Go to **API** and the **Tokens** section at the bottom, launch its **Add API token** button.
+  - Name it `SANITY_API_READ_TOKEN`, set **Permissions** to `Viewer`.
+  - Hit **Save** and you can copy/paste the token.
 
 Your `.env.local` file should look like this:
 

common/enums/paths/index.ts

@@ -0,0 +1,4 @@
+export enum Paths {
+  MARKDOWNS_PATH = 'markdowns',
+  FAQ_PATH = 'FAQ'
+}

components/Accordion/accordion.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import type { AccordionItem as AccordionItemType } from 'types';
+import styles from './styles.module.scss';
+import { AccordionItem } from './ui/AccordionItem';
+
+type Props = {
+  posts: AccordionItemType[];
+  limit?: number;
+};
+
+const Accordion: FC<Props> = ({ posts, limit }) => {
+  const slicedPosts = posts.slice(0, limit);
+
+  return (
+    <ul className={styles.accordion}>
+      {slicedPosts.map((post, idx) => (
+        <AccordionItem title={post.title} content={post.content} key={idx} />
+      ))}
+    </ul>
+  );
+};
+
+export default Accordion;

components/Accordion/index.ts

@@ -0,0 +1 @@
+export { default as Accordion } from './accordion';

components/Accordion/styles.module.scss

@@ -0,0 +1,3 @@
+.accordion {
+  @apply max-w-[1062px];
+}

components/Accordion/ui/AccordionItem/accordion-item.tsx

@@ -0,0 +1,45 @@
+import { FC, useState, useRef } from 'react';
+import cn from 'classnames';
+import { MDXRemote } from 'next-mdx-remote';
+import type { AccordionItem as AccordionItemType } from 'types';
+import styles from './styles.module.scss';
+import { styledTags } from '../styled-tags';
+
+const AccordionItem: FC<AccordionItemType> = ({ title, content }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const ref = useRef<HTMLDivElement>();
+
+  const itemStyles = cn(styles.accordionItem, {
+    [styles.withPadding]: isOpen
+  });
+  const titleIconStyles = cn(styles.plus, {
+    [styles.rotatePlus]: isOpen
+  });
+  const contentStyles = isOpen
+    ? { height: ref.current.scrollHeight }
+    : { height: 0 };
+
+  function accordionItemHandler() {
+    setIsOpen(!isOpen);
+  }
+
+  return (
+    <li className={itemStyles}>
+      <div className={styles.accordionItemTitle} onClick={accordionItemHandler}>
+        {title && <MDXRemote {...title} components={styledTags} />}
+        <span className={titleIconStyles} />
+      </div>
+
+      <div
+        ref={ref}
+        style={contentStyles}
+        className={styles.accordionItemContent}
+      >
+        {content && <MDXRemote {...content} components={styledTags} />}
+      </div>
+    </li>
+  );
+};
+
+export default AccordionItem;

components/Accordion/ui/AccordionItem/index.ts

@@ -0,0 +1 @@
+export { default as AccordionItem } from './accordion-item';

components/Accordion/ui/AccordionItem/styles.module.scss

@@ -0,0 +1,36 @@
+.accordionItem {
+  @apply transition-all flex flex-col gap-0 border-b-[1px] border-solid border-[#000000];
+}
+
+.withPadding {
+  @apply pb-[30px];
+}
+
+.accordionItemTitle {
+  @apply font-semibold text-[24px] leading-[30px] relative cursor-pointer py-[30px];
+}
+
+.accordionItemContent {
+  @apply text-[16px] font-normal leading-[24px] pr-[20px] overflow-y-hidden h-0;
+}
+
+.showContent {
+  @apply h-auto;
+}
+
+.plus {
+  --b: 5px;
+  background: conic-gradient(
+      from 90deg at var(--b) var(--b),
+      #fff 90deg,
+      #000 0
+    )
+    calc(100% + var(--b) / 2) calc(100% + var(--b) / 2) / calc(50% + var(--b))
+    calc(50% + var(--b));
+
+  @apply w-[20px] aspect-[1] inline-block border-none m-0 absolute right-0 top-[50%] translate-y-[-50%];
+}
+
+.rotatePlus {
+  @apply translate-y-[-50%] rotate-45;
+}

components/Accordion/ui/styled-tags/StyledAnchor/index.ts

@@ -0,0 +1 @@
+export { default as StyledAnchor } from './styled-anchor';

components/Accordion/ui/styled-tags/StyledAnchor/styled-anchor.tsx

@@ -0,0 +1,10 @@
+import { AnchorHTMLAttributes, FC } from 'react';
+import styles from './styles.module.scss';
+
+type Props = AnchorHTMLAttributes<HTMLAnchorElement>;
+
+const StyledAnchor: FC<Props> = props => (
+  <a className={styles.anchor} {...props} />
+);
+
+export default StyledAnchor;

components/Accordion/ui/styled-tags/StyledAnchor/styles.module.scss

@@ -0,0 +1,3 @@
+.anchor {
+  text-decoration: underline;
+}

components/Accordion/ui/styled-tags/StyledHeading/index.ts

@@ -0,0 +1 @@
+export { default as StyledHeading } from './styled-heading';

components/Accordion/ui/styled-tags/StyledHeading/styled-heading.tsx

@@ -0,0 +1,10 @@
+import { FC, HTMLAttributes } from 'react';
+import styles from './styles.module.scss';
+
+type Props = HTMLAttributes<HTMLHeadingElement>;
+
+const StyledHeading: FC<Props> = props => (
+  <h2 className={styles.heading} {...props} />
+);
+
+export default StyledHeading;

components/Accordion/ui/styled-tags/StyledHeading/styles.module.scss

@@ -0,0 +1,3 @@
+.heading {
+  font-size: 24px;
+}

components/Accordion/ui/styled-tags/index.ts

@@ -0,0 +1,12 @@
+import { StyledAnchor } from './StyledAnchor';
+import { StyledHeading } from './StyledHeading';
+
+export const styledTags = {
+  a: StyledAnchor,
+  h1: StyledHeading,
+  h2: StyledHeading,
+  h3: StyledHeading,
+  h4: StyledHeading,
+  h5: StyledHeading,
+  h6: StyledHeading
+};

components/Community/community.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import { urlForImage } from '@/lib/sanity';
+import { CommunityT } from 'types';
+import styles from './styles.module.scss';
+
+type Props = {
+  community: CommunityT;
+};
+
+export default function Community({ community }: Props) {
+  const { picture, title, description } = community || {};
+  const imageUrl = picture?.asset?._ref
+    ? urlForImage(picture).url()
+    : 'https://source.unsplash.com/630x441/';
+  return (
+    <section>
+      <div className={styles.block}>
+        <div className={styles.content}>
+          <div className={styles.image}>
+            <Image src={imageUrl} layout="fill" alt="community" />
+          </div>
+
+          <div className={styles.right}>
+            <h1 className={styles.title}>{title}</h1>
+            <p
+              dangerouslySetInnerHTML={{ __html: description }}
+              className={styles.description}
+            ></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/Community/index.ts

@@ -0,0 +1,3 @@
+import Community from './community';
+
+export default Community;

components/Community/styles.module.scss

@@ -0,0 +1,35 @@
+.block {
+  @apply container px-20 py-20 mx-auto;
+}
+
+.content {
+  @apply lg:-mx-6 lg:flex;
+}
+
+.right {
+  @apply lg:w-1/2;
+}
+
+.title {
+  @apply text-3xl font-bold;
+  color: #1a1a1a;
+}
+
+.description {
+  @apply mt-3 text-sm md:text-sm;
+  color: #1a1a1a;
+}
+
+.link {
+  @apply inline-flex justify-center text-sm font-semibold py-2.5 px-4 text-white mt-6;
+  background-color: #191b1d;
+}
+
+.image {
+  @apply w-full h-72 lg:h-80 lg:mr-32 lg:w-1/2;
+  position: relative;
+
+  & > span > img {
+    @apply object-cover;
+  }
+}

components/DonationV1/donation-v1.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { DonationV1T } from 'types';
+import styles from './styles.module.scss';
+
+type Props = {
+  donation: DonationV1T;
+};
+
+export default function DonationV1({ donation }: Props) {
+  const { title, description, link, titleLink } = donation || {};
+  return (
+    <section className={styles.block}>
+      <div className={styles.container}>
+        <h1 className={styles.title}>{title}</h1>
+        <span className={styles.description}>{description}</span>
+        <Link href={link ?? ''} className={styles.link}>
+          {titleLink}
+        </Link>
+      </div>
+    </section>
+  );
+}

components/DonationV1/index.ts

@@ -0,0 +1,3 @@
+import DonationV1 from './donation-v1';
+
+export default DonationV1;

components/DonationV1/styles.module.scss

@@ -0,0 +1,21 @@
+.block {
+  @apply flex flex-col justify-center h-80 text-center px-8 dark:text-white;
+  background-color: #191b1d;
+}
+
+.container {
+  @apply flex flex-col justify-center items-center mx-auto md:max-w-[50%];
+}
+
+.title {
+  @apply text-slate-900 text-4xl tracking-tight font-extrabold sm:text-5xl dark:text-white;
+}
+
+.description {
+  @apply mt-6 text-base;
+}
+
+.link {
+  @apply inline-flex justify-center text-sm font-semibold py-2.5 px-4 bg-white mt-6 ml-8;
+  color: #191b1d;
+}