Feat/sanity setup (#106)

* chore: setup with pnpm * feat: working with sanity * chore: remove consoles * chore: matched types for faq card * chore: testing out .vercelignore * chore: testing out .vercelignore * 1.5.0
kunalkeshan · Apr 7, 2023 · d7dc407 · d7dc407 · vercel · Apr 7, 2023
1 parent e5abe51
commit d7dc407
Show file tree

Hide file tree

Showing 22 changed files with 10,198 additions and 2,696 deletions.
diff --git a/.vercelignore b/.vercelignore
@@ -0,0 +1,2 @@
+santiy
+studio
diff --git a/@types/data.d.ts b/@types/data.d.ts
@@ -0,0 +1,4 @@
+interface Faq {
+  question: string;
+  answer: string;
+}
diff --git a/client.ts b/client.ts
@@ -0,0 +1,10 @@
+// client.ts
+import { createClient } from "@sanity/client";
+
+const client = createClient({
+  projectId: "gj9kvgjn",
+  dataset: "production",
+  useCdn: false, // `false` if you want to ensure fresh data
+});
+
+export default client;
diff --git a/components/contact/FaqCard.tsx b/components/contact/FaqCard.tsx
@@ -3,13 +3,10 @@
  */
 
 import React, { useState } from "react";
-import FAQ from "../../data/faqs";
 import { FaPlus } from "react-icons/fa";
 import { motion, AnimatePresence } from "framer-motion";
 
-type FaqDataType = typeof FAQ[number];
-
-const FaqCard: React.FC<FaqDataType> = ({ question, answer }) => {
+const FaqCard: React.FC<Faq> = ({ question, answer }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const OpenAnimation = {

diff --git a/components/contact/FrequentlyAskedQuestions.tsx b/components/contact/FrequentlyAskedQuestions.tsx
@@ -3,10 +3,15 @@
  */
 
 import React from "react";
-import FAQ from "../../data/faqs";
 import FaqCard from "./FaqCard";
 
-const FrequentlyAskedQuestions = () => {
+interface FrequentlyAskedQuestionsProps {
+  faqs: Faq[];
+}
+
+const FrequentlyAskedQuestions: React.FC<FrequentlyAskedQuestionsProps> = ({
+  faqs,
+}) => {
   return (
     <div className="mt-20 scroll-mt-20" id="faqs">
       <h2 className="text-center text-5xl font-semibold">
@@ -18,7 +23,7 @@ const FrequentlyAskedQuestions = () => {
         answer any of your questions.
       </p>
       <div className="mt-8 flex flex-col gap-8">
-        {FAQ.map((faq, index) => (
+        {faqs.map((faq, index) => (
           <FaqCard key={index} {...faq} />
         ))}
       </div>

diff --git a/data/faqs.ts b/data/faqs.ts
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kunalkeshan-dev",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@next/font": "^13.2.3",
+    "@sanity/client": "^5.4.2",
     "@types/node": "18.11.10",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",

diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -9,8 +9,12 @@ import PublicLayout from "../layouts/PublicLayout";
 import { motion } from "framer-motion";
 import Contact from "../components/contact/Contact";
 import FrequentlyAskedQuestions from "../components/contact/FrequentlyAskedQuestions";
+import client from "../client";
+import { InferGetStaticPropsType, NextPage, GetStaticProps } from "next";
 
-const ContactPage = () => {
+const ContactPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
+  faqs,
+}) => {
   return (
     <>
       <Head>
@@ -24,11 +28,20 @@ const ContactPage = () => {
           className="mx-auto mt-10 mb-20 max-w-7xl px-5"
         >
           <Contact />
-          <FrequentlyAskedQuestions />
+          <FrequentlyAskedQuestions faqs={faqs} />
         </motion.section>
       </PublicLayout>
     </>
   );
 };
 
+export const getStaticProps: GetStaticProps<{ faqs: Faq[] }> = async () => {
+  const faqs = await client.fetch(`*[_type == "faqs"]`);
+  return {
+    props: {
+      faqs,
+    },
+  };
+};
+
 export default ContactPage;