feat: create VerseSlideshow and VerseSlide components and insert into Dashboard

Author: Awnder

src/components/VerseSlide.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface VerseSlideProps {
+  className?: string;
+  verseReference?: string;
+  verseText?: string;
+}
+
+const VerseSlide: React.FC<VerseSlideProps> = ({
+  className,
+  verseReference,
+  verseText,
+}) => {
+  return (
+    <div className={cn("default-class", className)}>
+      <Card>
+        <CardHeader>
+          <CardTitle>{verseReference}</CardTitle>
+        </CardHeader>
+        {/* <AnimatePresence mode="wait">
+          <motion.div
+            key="verse"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.5 }}
+          > */}
+        <CardContent>
+          <blockquote className="text-lg italic mb-4">{verseText}</blockquote>
+        </CardContent>
+          {/* </motion.div>
+        </AnimatePresence> */}
+      </Card>
+    </div>
+  );
+};
+
+export default VerseSlide;

src/components/VerseSlideshow.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import VerseSlide from "./VerseSlide";
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface VerseSlideshowProps {
+  className?: string;
+}
+
+const verseReferences = {
+  "John 3:16":
+    "For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.",
+  "Philippians 4:13": "I can do all this through him who gives me strength.",
+  "Psalm 23:1": "The Lord is my shepherd, I lack nothing.",
+};
+
+const VerseSlideshow: React.FC<VerseSlideshowProps> = ({ className }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const verseKeys = Object.keys(verseReferences);
+  
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % verseKeys.length);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, [verseKeys.length]);
+
+  return (
+    <div className={cn("default-class", className)}>
+      <AnimatePresence>
+        {Object.entries(verseReferences).map(
+          ([reference, text], index) =>
+            index === currentIndex && (
+              <motion.div
+                key={reference}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+              >
+                <VerseSlide verseReference={reference} verseText={text} />
+              </motion.div>
+            )
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default VerseSlideshow;

src/pages/Dashboard.tsx

@@ -20,6 +20,7 @@ import MeditationCard from '@/components/MeditationCard';
 import CommunityMap from '@/components/CommunityMap';
 import { motion } from 'framer-motion';
 import { toast } from 'sonner';
+import VerseSlideshow from '@/components/VerseSlideshow';
 
 const formatDate = (date: Date) => {
   return new Intl.DateTimeFormat('en-US', { 
@@ -308,6 +309,7 @@ const Dashboard: React.FC = () => {
         <h3 className="text-xl font-medium mb-3">Daily Inspiration</h3>
         <blockquote className="text-lg italic mb-4"> "-- QUOTE HERE --"
         </blockquote>
+        <VerseSlideshow />
         <p className="text-muted-foreground">Scripture Quote</p>
       </div>
     </motion.div>