add quiz widget to sanity portabletext #94

add quiz widget to sanity portabletext #94

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>
+  );
+}

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: {

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} />

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}
+    />
+  );
+}

schemas/blockContent.ts

@@ -75,5 +75,8 @@ export default defineType({
     defineArrayMember({
       type: "customTable",
     }),
+    defineArrayMember({
+      type: "quiz",
+    }),
   ],
 });

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,
 ];

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,
+      };
+    },
+  },
+});

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')",

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;