feat: migrate ChapterSuggestions and add icons

components/buttons.ts/ChapterSuggestion.tsx

@@ -0,0 +1,51 @@
+import { HTMLAttributeAnchorTarget } from 'react'
+import IconArrowRight from '../icons/ArrowRight'
+import Link from 'next/link'
+import { Url } from 'url'
+
+export interface IChapterSuggestionProps {
+  href: Url
+  target?: HTMLAttributeAnchorTarget
+  title: string
+  description: string
+  linkText: string
+  className?: string
+}
+
+/**
+ * 
+ * @param {Object} props - The props of the component
+ * @param {string} props.href - The URL of the chapter
+ * @param {string} props.target - The target of the link
+ * @param {string} props.title - The title of the chapter
+ * @param {string} props.description - The description of the chapter
+ * @param {string} props.linkText - The text of the link
+ * @param {string} props.className - The class name of the component
+ */
+export default function ChapterSuggestion({
+  href,
+  target = '_self',
+  title,
+  description,
+  linkText,
+  className,
+}: IChapterSuggestionProps) {
+  return (
+    <Link href={href}>
+      <a
+        target={target}
+        rel="noopener noreferrer"
+        title={description}
+        className={`${className} flex flex-col mt-4 p-6 max-w-lg rounded shadow-md border border-gray-200 text-gray-900 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300`}
+       data-testid="ChapterSuggestion-link"
+      >
+        <h5 className="text-lg font-medium font-sans antialiased mb-2">{title}</h5>
+        <p className="flex-1 mb-2 font-normal text-gray-600 font-sans antialiased">{description}</p>
+        <p className="text-primary-500 font-medium font-sans antialiased">
+          {linkText}
+          <IconArrowRight className="inline-block h-4" />
+        </p>
+      </a>
+    </Link>
+  )
+}

components/buttons.ts/ChapterSuggestions.tsx

@@ -0,0 +1,31 @@
+import ChapterSuggestion, { IChapterSuggestionProps } from "./ChapterSuggestion";
+
+interface IChapterSuggestionsProps {
+  suggestions: IChapterSuggestionProps[]
+  className?: string
+}
+
+/**
+ * 
+ * @param {Object} props - The props of the component
+ * @param {Array} props.suggestions - The suggestions of the chapter
+ * @param {string} props.className - The class name of the component
+ */
+export default function ChapterSuggestions({ suggestions = [], className = '' }: IChapterSuggestionsProps) {
+  return (
+    <div className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2`}>
+      {
+        suggestions.map((suggestion, index) => (
+          <ChapterSuggestion
+            key={index}
+            href={suggestion.href}
+            title={suggestion.title}
+            description={suggestion.description}
+            linkText={suggestion.linkText}
+            className={suggestion.className}
+          />
+        ))
+      }
+    </div>
+  )
+}

components/icons/Ambassador.js

@@ -0,0 +1,31 @@
+export default function IconArrowDown({ className = '' }) {
+  return (
+    <svg
+      width="11"
+      height="7"
+      viewBox="0 0 512 512"
+      ill="#000000"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M494.462,199.131c-9.25-9.25-21.001-15.101-33.751-16.935l0.031-119.217c0.001-2.52-1.101-4.914-3.015-6.552
+			c-1.914-1.638-4.447-2.358-6.94-1.967l-77.373,12.116c-4.195,0.656-7.288,4.27-7.288,8.518l-0.001,23.084l-246.52,49.785
+			c-4.668,0.943-7.688,5.49-6.744,10.157c0.826,4.091,4.423,6.917,8.442,6.917c0.566,0,1.139-0.056,1.715-0.172l243.106-49.095
+			l-0.002,40.208c0,4.761,3.859,8.621,8.62,8.622c0.001,0,0,0,0.001,0c4.761,0,8.621-3.859,8.621-8.62l0.006-73.508l60.128-9.416
+			l-0.086,336.877l-60.119-9.38l0.067-210.367c0.001-4.761-3.857-8.622-8.618-8.624c-0.001,0-0.002,0-0.003,0
+			c-4.76,0-8.62,3.858-8.621,8.619l-0.056,177.003L58.964,304.995l0.551-127.309l35.661-7.203c4.668-0.943,7.688-5.49,6.744-10.157
+			c-0.941-4.667-5.487-7.686-10.157-6.744l-42.548,8.593c-4.009,0.809-6.898,4.324-6.915,8.414l-0.095,21.991H8.621
+			c-4.762,0-8.621,3.86-8.621,8.621v83.121c0,4.761,3.859,8.621,8.621,8.621h33.153l-0.083,19.058
+			c-0.017,4.115,2.876,7.667,6.909,8.486l108.919,22.07l-23.899,97.845H93.582l3.653-92.705c0.187-4.758-3.517-8.766-8.275-8.955
+			c-4.759-0.177-8.766,3.519-8.953,8.275l-4.006,101.667c-0.092,2.344,0.775,4.623,2.4,6.314c1.625,1.691,3.869,2.646,6.214,2.646
+			h55.775c3.974,0,7.433-2.716,8.375-6.576l6.992-28.63l39.942,0.02c0.002,0,0.003,0,0.005,0c3.751,0,7.071-2.424,8.213-5.997
+			l19.363-60.591l142.776,28.9l-0.007,23.156c-0.002,4.25,3.093,7.866,7.292,8.521l77.362,12.07c0.444,0.07,0.886,0.103,1.329,0.103
+			c2.04,0,4.034-0.725,5.606-2.071c1.913-1.637,3.014-4.029,3.015-6.548l0.031-119.159c12.745-1.81,24.521-7.658,33.806-16.931
+			C517.848,260.537,517.836,222.505,494.462,199.131z M41.849,275.703H17.243v-65.878h24.89L41.849,275.703z M189.408,405.214
+			l-29.44-0.014l14.464-59.215l31.844,6.445L189.408,405.214z M482.297,271.718c-6.003,5.995-13.468,9.98-21.583,11.63
+			l-0.014-52.636l0.008-31.022c8.118,1.66,15.576,5.646,21.562,11.633C498.923,227.976,498.934,255.072,482.297,271.718z"
+      />
+    </svg>
+  );
+}

components/icons/ArrowDown.js

@@ -0,0 +1,7 @@
+export default function IconArrowDown({ className= '' }) {
+    return (
+        <svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+            <path d="M1 1.25L5.5 5.75L10 1.25" stroke="#8B9394" />
+        </svg>
+    )
+}

components/icons/ArrowRight.js

@@ -0,0 +1,7 @@
+export default function IconArrowRight ({ className }) {
+  return (
+    <svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+    </svg>
+  )
+}

components/icons/ArrowUp.js

@@ -0,0 +1,11 @@
+export default function IconArrowUp({ className }) {
+  return (
+    <svg
+      className={className || 'inline-block'}
+      viewBox="0 0 32 32"
+    >
+      <path d="M25,0H7A7,7,0,0,0,0,7V25a7,7,0,0,0,7,7H25a7,7,0,0,0,7-7V7A7,7,0,0,0,25,0Zm5,25a5,5,0,0,1-5,5H7a5,5,0,0,1-5-5V7A5,5,0,0,1,7,2H25a5,5,0,0,1,5,5Z" />
+      <path d="M24,7H14V9h7.59L7.29,23.29l1.41,1.41L23,10.41V18h2V8A1,1,0,0,0,24,7Z" />
+    </svg>
+  );
+}

components/icons/Clipboard.js

@@ -0,0 +1,7 @@
+export default function IconClipboard ({ className }) {
+  return (
+    <svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 20 20">
+      <path d="M15.6 2l-1.2 3H5.6L4.4 2C3.629 2 3 2.629 3 3.4v15.2c0 .77.629 1.4 1.399 1.4h11.2c.77 0 1.4-.631 1.4-1.4V3.4C17 2.629 16.369 2 15.6 2zm-2 2l.9-2h-2.181L11.6 0H8.4l-.72 2H5.5l.899 2H13.6z" />
+    </svg>
+  )
+}

components/icons/Code.js

@@ -0,0 +1,7 @@
+export default function IconCode ({ className }) {
+  return (
+    <svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 20 20">
+      <path d="M5.719 14.75a.997.997 0 0 1-.664-.252L-.005 10l5.341-4.748a1 1 0 0 1 1.328 1.495L3.005 10l3.378 3.002a1 1 0 0 1-.664 1.748zm8.945-.002L20.005 10l-5.06-4.498a.999.999 0 1 0-1.328 1.495L16.995 10l-3.659 3.252a1 1 0 0 0 1.328 1.496zm-4.678 1.417l2-12a1 1 0 1 0-1.972-.329l-2 12a1 1 0 1 0 1.972.329z" />
+    </svg>
+  )
+}

components/icons/Conference.js

@@ -0,0 +1,34 @@
+export default function Conference({ className }) {
+  return (
+    <svg className={className} width="20px" height="20px" viewBox="0 0 24 24">
+      <path
+        d="M7.5 4.20581L16.5 19.7943"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.7942 7.5L4.20573 16.5"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.3293 3.30664L9.6706 20.6933"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.6934 14.3293L3.30669 9.6706"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

components/icons/Contributing.js

@@ -0,0 +1,25 @@
+export default function IconContributing ({ className }) {
+  return (
+    <svg className={className || 'inline-block'} xmlns="http://www.w3.org/2000/svg" width="29.07" height="26.59" viewBox="0 0 29.07 26.59">
+      <defs>
+          <style>{`.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}`}</style>
+      </defs>
+      <path class="cls-1" d="M14.61,23.54a5,5,0,0,0,2.65,1.55A5.31,5.31,0,0,0,20.19,25a4.65,4.65,0,0,0,1.27-.61,9.85,9.85,0,0,0,1.28-1.15,19.34,19.34,0,0,1,2.52-1.81l1.8-1.21.14-.1a1.45,1.45,0,0,0,.42-1.92,1.23,1.23,0,0,0-1.77-.45l-2.31,1.55L25.35,11a1.46,1.46,0,0,0-.94-1.77,1.34,1.34,0,0,0-1.57,1.13l.4-1.81a1.52,1.52,0,0,0-.91-1.86,1.12,1.12,0,0,0-1,.23,1.69,1.69,0,0,0-.6,1l-.39,1.81a1.48,1.48,0,0,0-.94-1.78,1.22,1.22,0,0,0-1,.2,1.61,1.61,0,0,0-.59.94l-.45,2.1a1.41,1.41,0,0,0-1-1.68,1.28,1.28,0,0,0-1.54,1l-.36,1.63" />
+      <line class="cls-1" x1="20.35" y1="9.71" x2="19.36" y2="14.26" />
+      <line class="cls-1" x1="22.84" y1="10.35" x2="21.85" y2="14.9" />
+      <line class="cls-1" x1="17.39" y1="11.17" x2="16.85" y2="13.62" />
+      <line class="cls-1" x1="20.35" y1="9.71" x2="19.36" y2="14.26" />
+      <path class="cls-1" d="M17.39,11.17l-.54,2.45m6-3.27-1,4.55" />
+      <path class="cls-1" d="M23.54,19.31a2.78,2.78,0,0,0-4.18-.69" />
+      <path class="cls-1" d="M14.53,12.16l1.38,6.34a5.64,5.64,0,0,1-4.1,6.59A5.34,5.34,0,0,1,8.87,25,4.94,4.94,0,0,1,7.6,24.4a9.78,9.78,0,0,1-1.27-1.15,19.34,19.34,0,0,0-2.52-1.81L2,20.23l-.15-.1a1.46,1.46,0,0,1-.41-1.92,1.23,1.23,0,0,1,1.76-.45l2.32,1.55L3.72,11a1.46,1.46,0,0,1,.94-1.77,1.33,1.33,0,0,1,1.56,1.13L5.83,8.54a1.51,1.51,0,0,1,.91-1.86,1.12,1.12,0,0,1,1,.23,1.74,1.74,0,0,1,.6,1l.39,1.81a1.48,1.48,0,0,1,.94-1.78,1.23,1.23,0,0,1,1,.2,1.61,1.61,0,0,1,.59.94l.45,2.1a1.41,1.41,0,0,1,1-1.68,1.28,1.28,0,0,1,1.54,1l.35,1.63" />
+      <line class="cls-1" x1="9.71" y1="14.26" x2="8.72" y2="9.71" />
+      <line class="cls-1" x1="7.21" y1="14.9" x2="6.22" y2="10.35" />
+      <line class="cls-1" x1="12.22" y1="13.62" x2="11.68" y2="11.17" />
+      <line class="cls-1" x1="9.71" y1="14.26" x2="8.72" y2="9.71" />
+      <path class="cls-1" d="M12.22,13.62l-.54-2.45M7.21,14.9l-1-4.55" />
+      <line class="cls-1" x1="14.53" y1="1.05" x2="14.53" y2="4.26" />
+      <line class="cls-1" x1="9.86" y1="2.62" x2="11.93" y2="5.07" />
+      <line class="cls-1" x1="19.21" y1="2.62" x2="17.14" y2="5.07" />
+    </svg>
+  )
+}

components/icons/Cross.js

@@ -0,0 +1,8 @@
+export default function Cross ({ className }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-x-square" viewBox="0 0 16 16">
+        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+    </svg>
+  )
+}

components/icons/DocsArrow.js

@@ -0,0 +1,7 @@
+export default function DocsArrow({ isDropDown, activeDropDownItem, onClick, className }) {
+    return (
+        <div className={`w-6 my-auto p-2 rounded-md cursor-pointer ${isDropDown && 'hover:bg-gray-100'}`} onClick={isDropDown ? onClick : () => { }}>
+          {isDropDown && <img src='/img/illustrations/icons/arrow.svg' className={`transition-transform w-fit m-auto duration-200 transform ${className} ${activeDropDownItem ? 'rotate-90' : ''}`} />}
+        </div>
+      );
+}

components/icons/Documents.js

@@ -0,0 +1,7 @@
+export default function IconDocuments ({ className }) {
+  return (
+    <svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 20 20">
+      <path d="M19.398 7.415l-7.444-1.996L10.651.558c-.109-.406-.545-.642-.973-.529L.602 2.461c-.428.114-.686.538-.577.944l3.23 12.051c.109.406.544.643.971.527l3.613-.967-.492 1.838c-.109.406.149.83.577.943l8.11 2.174c.428.115.862-.121.972-.529l2.97-11.084c.108-.406-.15-.83-.578-.943zM1.633 3.631l7.83-2.096 2.898 10.818-7.83 2.096L1.633 3.631zm14.045 14.832L8.864 16.6l.536-2.002 3.901-1.047c.428-.113.688-.537.578-.943l-1.508-5.627 5.947 1.631-2.64 9.851z" />
+    </svg>
+  )
+}

components/icons/Exclamation.js

@@ -0,0 +1,7 @@
+export default function IconExclamation({ className = '' }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+    </svg>
+  )
+}

components/icons/Filter.js

@@ -0,0 +1,14 @@
+export default function IconFilter({className=''}) {
+    return (
+        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+            <g clipPath="url(#clip0_894_656)">
+                <path d="M1.11536 0.615479H15.8846V3.38471L10.3461 7.63646V13.2309L6.65382 15.3847V7.63646L1.11536 3.38471V0.615479Z" stroke="#556061" strokeWidth="1.5" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_894_656">
+                    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}

components/icons/Generator.js

@@ -0,0 +1,7 @@
+export default function IconGenerator ({ className }) {
+  return (
+    <svg className={className} stroke="currentColor" strokeWidth=".3" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M11.4 8.2L14 9.3c.7.3.9.9.4 1.5l-5.9 8c-.3.4-.8.1-.8-.3l.7-6.6L6 10.7c-.7-.3-.9-.9-.4-1.5l5.9-8c.3-.4.8-.1.8.3l-.9 6.7zm2.4 2.2c.1-.1 0-.1-.1-.2l-2.9-1.3c-.1-.1-.3-.2-.2-.4l.6-5.5-5 6.7c-.1.1 0 .1.1.2l2.9 1.3c.1.1.3.2.2.4L8.8 17l5-6.6z"></path>
+    </svg>
+  )
+}