From 0c3d661750427380e55eac6046b57904e0bfe4c2 Mon Sep 17 00:00:00 2001
From: Victor Eke <evavic44@gmail.com>
Date: Mon, 8 Jul 2024 15:55:05 +0100
Subject: [PATCH] add quiz widget to sanity portabletext

---
 app/components/shared/Accordion.tsx          | 36 ++++++++++++++++++++
 app/components/shared/CustomPortableText.tsx |  4 ++-
 app/components/shared/PortableImage.tsx      |  1 -
 app/components/shared/Quiz.tsx               | 13 +++++++
 schemas/blockContent.ts                      |  3 ++
 schemas/index.ts                             |  2 ++
 schemas/quiz.ts                              | 35 +++++++++++++++++++
 tailwind.config.js                           |  4 +++
 types/index.ts                               |  6 ++++
 9 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 app/components/shared/Accordion.tsx
 create mode 100644 app/components/shared/Quiz.tsx
 create mode 100644 schemas/quiz.ts

diff --git a/app/components/shared/Accordion.tsx b/app/components/shared/Accordion.tsx
new file mode 100644
index 0000000..7b9591d
--- /dev/null
+++ b/app/components/shared/Accordion.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { useState } from "react";
+import { BiMinus, BiPlus } from "react-icons/bi";
+
+export default function Accordion({
+  id,
+  question,
+  answer,
+}: {
+  id: string;
+  question: string;
+  answer: string;
+}) {
+  const [active, setActive] = useState<string | null>(null);
+
+  return (
+    <div
+      className={`grid gap-y-2 border-b dark:border-zinc-800 border-zinc-200 my-4 duration-200 ${active === id ? "grid-rows-full pb-4" : "grid-rows-fit pb-0"}`}
+    >
+      <div
+        className={`flex items-center justify-between gap-x-2 cursor-pointer selection:bg-transparent`}
+        onClick={() => setActive(active === id ? null : id)}
+      >
+        <h3 className="text-lg mb-1 dark:text-white text-zinc-700">
+          {question}
+        </h3>
+        <button className="p-1 rounded-full text-sm cursor-[inherit] duration-100 dark:bg-primary-bg bg-secondary-bg">
+          {active === id ? <BiMinus /> : <BiPlus />}
+        </button>
+      </div>
+      <p className="dark:text-zinc-400 text-zinc-600 overflow-hidden">
+        {answer}
+      </p>
+    </div>
+  );
+}
diff --git a/app/components/shared/CustomPortableText.tsx b/app/components/shared/CustomPortableText.tsx
index b28651e..a9f5874 100644
--- a/app/components/shared/CustomPortableText.tsx
+++ b/app/components/shared/CustomPortableText.tsx
@@ -7,7 +7,8 @@ import getYoutubeId from "@/app/utils/get-youtubeId";
 import YoutubeIframe from "./YoutubeIframe";
 import RefLink from "./RefLink";
 import Table from "./Table";
-import { TableValueProps } from "@/types";
+import { QuizValueProps, TableValueProps } from "@/types";
+import Quiz from "./Quiz";
 
 export const CustomPortableText: PortableTextComponents = {
   types: {
@@ -20,6 +21,7 @@ export const CustomPortableText: PortableTextComponents = {
     customTable: ({ value }: { value: TableValueProps }) => (
       <Table value={value} />
     ),
+    quiz: ({ value }: { value: QuizValueProps }) => <Quiz value={value} />,
   },
 
   block: {
diff --git a/app/components/shared/PortableImage.tsx b/app/components/shared/PortableImage.tsx
index 2285f67..c8d5398 100644
--- a/app/components/shared/PortableImage.tsx
+++ b/app/components/shared/PortableImage.tsx
@@ -8,7 +8,6 @@ type imageProp = {
 };
 
 export default function SampleImageComponent({ value }: imageProp) {
-  console.log(value);
   return (
     <figure className="my-10">
       <ImageComponent src={value} alt={value.alt} />
diff --git a/app/components/shared/Quiz.tsx b/app/components/shared/Quiz.tsx
new file mode 100644
index 0000000..b67f81f
--- /dev/null
+++ b/app/components/shared/Quiz.tsx
@@ -0,0 +1,13 @@
+import { QuizValueProps } from "@/types";
+import Accordion from "./Accordion";
+
+export default function Quiz({ value }: { value: QuizValueProps }) {
+  return (
+    <Accordion
+      key={value._key}
+      id={value._key}
+      question={value.question}
+      answer={value.answer}
+    />
+  );
+}
diff --git a/schemas/blockContent.ts b/schemas/blockContent.ts
index 9e773aa..12d7a1c 100644
--- a/schemas/blockContent.ts
+++ b/schemas/blockContent.ts
@@ -75,5 +75,8 @@ export default defineType({
     defineArrayMember({
       type: "customTable",
     }),
+    defineArrayMember({
+      type: "quiz",
+    }),
   ],
 });
diff --git a/schemas/index.ts b/schemas/index.ts
index abd1c5c..45616d3 100644
--- a/schemas/index.ts
+++ b/schemas/index.ts
@@ -7,6 +7,7 @@ import heroe from "./heroe";
 import { youtube } from "./youtube";
 import { table } from "./table";
 import blockContent from "./blockContent";
+import quiz from "./quiz";
 
 export const schemaTypes = [
   profile,
@@ -20,4 +21,5 @@ export const schemaTypes = [
   blockContent,
   youtube,
   table,
+  quiz,
 ];
diff --git a/schemas/quiz.ts b/schemas/quiz.ts
new file mode 100644
index 0000000..6210c38
--- /dev/null
+++ b/schemas/quiz.ts
@@ -0,0 +1,35 @@
+import { defineField, defineType } from "sanity";
+import { BiCommand } from "react-icons/bi";
+
+export default defineType({
+  name: "quiz",
+  title: "Quiz",
+  type: "object",
+  icon: BiCommand,
+  fields: [
+    defineField({
+      name: "question",
+      title: "Question",
+      type: "string",
+    }),
+    defineField({
+      name: "answer",
+      title: "Answer",
+      type: "text",
+      rows: 4,
+      description: "What is the answer to the question?",
+    }),
+  ],
+  preview: {
+    select: {
+      question: "question",
+      answer: "answer",
+    },
+    prepare({ question, answer }) {
+      return {
+        title: !question ? "No Question" : question,
+        subtitle: !answer ? "No answer" : answer,
+      };
+    },
+  },
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index baf9836..32855d4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,6 +26,10 @@ module.exports = {
       gridTemplateColumns: {
         custom: "1.2fr 1fr",
       },
+      gridTemplateRows: {
+        fit: "min-content 0fr",
+        full: "min-content 1fr",
+      },
       backgroundImage: {
         noise:
           "url('https://res.cloudinary.com/victoreke/image/upload/v1691779257/victoreke/noise.png')",
diff --git a/types/index.ts b/types/index.ts
index baa2181..4be3537 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -11,6 +11,12 @@ export interface TableValueProps {
   caption?: string;
 }
 
+export interface QuizValueProps {
+  _key: string;
+  question: string;
+  answer: string;
+}
+
 export type ProfileType = {
   _id: string;
   fullName: string;