@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/non-functional/imageCarousels/ProgramCarousel.tsx

@@ -1,233 +1,233 @@
-// src/components/ProgramsCarousel.tsx
-"use client";
-
-import Link from 'next/link';
-import { PrevButton, NextButton, ActionButton } from "@/components/other/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/other/card';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { motion } from 'framer-motion';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import { PROGRAM_CAROUSEL } from './constants/programCarousel'; 
-
-const staggerChildren = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.2,
-      delayChildren: 0.3,
-    },
-  },
-};
-
-const childVariant = {
-  hidden: { opacity: 0, y: 20 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.5, ease: 'easeOut' },
-  },
-};
-
-interface Program {
-  title: string;
-  video: string;
-  poster: string;
-  description: string;
-  link: string;
-}
-
-interface ProgramsCarouselProps {
-  programs?: Program[];
-  sectionTitle?: string;
-  buttonText?: string;
-  buttonLink?: string;
-}
-
-// Separate component for each slide
-const ProgramSlide = ({ program }: { program: Program }) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  const handleMouseEnter = () => {
-    if (videoRef.current) {
-      videoRef.current.play().catch((error) => console.error(PROGRAM_CAROUSEL.ERRORS.VIDEO_PLAY_ERROR, error));
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (videoRef.current) {
-      videoRef.current.pause();
-      videoRef.current.currentTime = 0;
-    }
-  };
-
-  return (
-    <motion.div
-      className="embla__slide flex-[0_0_100%] max-[640px]:h-[400px] sm:flex-[0_0_33.333333%] sm:h-[900px] w-full flex items-center justify-center"
-      variants={childVariant}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <Card className="bg-white/90 w-full max-[640px]:h-[400px] sm:h-[900px] flex flex-col border-none pb-6 sm:pb-12 shadow-lg hover:shadow-xl transition-shadow duration-300">
-        <div className="relative w-full max-[640px]:h-[280px] sm:h-[800px]">
-          <video
-            ref={videoRef}
-            src={program.video}
-            poster={program.poster}
-            className="w-full h-full object-cover"
-            muted
-            playsInline
-            loop
-          />
-        </div>
-        <CardHeader className="flex-shrink-0 max-[640px]">
-          <CardTitle className="max-[640px]:text-xl sm:text-3xl font-bold text-center">
-            {program.title}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="flex-grow flex items-center justify-center max-[640px]">
-          <CardDescription className="max-[640px]:text-lg sm:text-lg text-gray-800 text-center line-clamp-3">
-            {program.description}
-          </CardDescription>
-        </CardContent>
-      </Card>
-    </motion.div>
-  );
-};
-
-const ProgramsCarousel = ({
-  programs = [
-    {
-      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[0],
-      video: '/videos/placeholder1.mp4',
-      poster: '/images/placeholder1.jpg',
-      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[0],
-      link: '/',
-    },
-    {
-      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[1],
-      video: '/videos/placeholder2.mp4',
-      poster: '/images/placeholder2.jpg',
-      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[1],
-      link: '/',
-    },
-    {
-      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[2],
-      video: '/videos/placeholder3.mp4',
-      poster: '/images/placeholder3.jpg',
-      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[2],
-      link: '/',
-    },
-    {
-      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[3],
-      video: '/videos/placeholder4.mp4',
-      poster: '/images/placeholder4.jpg',
-      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[3],
-      link: '/',
-    },
-    {
-      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[4],
-      video: '/videos/placeholder5.mp4',
-      poster: '/images/placeholder5.jpg',
-      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[4],
-      link: '/',
-    },
-  ],
-  sectionTitle = PROGRAM_CAROUSEL.UI.SECTION_TITLE,
-  buttonText = PROGRAM_CAROUSEL.UI.VIEW_ALL_BUTTON_TEXT,
-  buttonLink = '/',
-}: ProgramsCarouselProps) => {
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'start', containScroll: 'trimSnaps', slidesToScroll: 1 });
-  const [canPrev, setCanPrev] = useState(false);
-  const [canNext, setCanNext] = useState(true);
-
-  const scrollPrev = useCallback(() => {
-    if (emblaApi) emblaApi.scrollPrev();
-  }, [emblaApi]);
-
-  const scrollNext = useCallback(() => {
-    if (emblaApi) emblaApi.scrollNext();
-  }, [emblaApi]);
-
-  const onSelect = useCallback(() => {
-    if (!emblaApi) return;
-    setCanPrev(emblaApi.canScrollPrev());
-    setCanNext(emblaApi.canScrollNext());
-  }, [emblaApi]);
-
-  useEffect(() => {
-    if (!emblaApi) return;
-    emblaApi.on('select', onSelect);
-    emblaApi.on('reInit', onSelect);
-    onSelect();
-
-    emblaApi.reInit();
-    emblaApi.scrollTo(0, false);
-
-    const handleResize = () => emblaApi.reInit();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [emblaApi, onSelect]);
-
-  return (
-    <motion.section
-      className="w-full bg-white/80 relative overflow-hidden p-0 m-0"
-      initial="hidden"
-      whileInView="visible"
-    >
-      <div className="w-full py-12 sm:py-24 m-0">
-        <motion.h2 className="text-4xl sm:text-6xl font-bold text-center mb-8">
-          {sectionTitle}
-        </motion.h2>
-        <div className="embla relative border-none outline-none w-full" ref={emblaRef}>
-          <motion.div
-            className="embla__container flex gap-0 w-full"
-            variants={staggerChildren}
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true }}
-          >
-            {programs.map((program, index) => (
-              <ProgramSlide key={index} program={program} />
-            ))}
-          </motion.div>
-          <PrevButton
-            className="absolute left-0 top-1/2 transform -translate-y-1/2 p-2 rounded-r-full"
-            onClick={scrollPrev}
-            disabled={!canPrev}
-            aria-label={PROGRAM_CAROUSEL.BUTTONS.PREVIOUS_SLIDE_ARIA}
-          >
-            <ChevronLeft size={24} />
-          </PrevButton>
-          <NextButton
-            className="absolute right-0 top-1/2 transform -translate-y-1/2 p-2 rounded-l-full"
-            onClick={scrollNext}
-            disabled={!canNext}
-            aria-label={PROGRAM_CAROUSEL.BUTTONS.NEXT_SLIDE_ARIA}
-          >
-            <ChevronRight size={24} />
-          </NextButton>
-        </div>
-        <motion.div
-          className="mt-8 text-center"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5, delay: 0.6, ease: 'easeOut' }}
-        >
-          <Link href={buttonLink}>
-            <ActionButton
-              className="hover:scale-110 hover:shadow-lg hover:shadow-gray-800"
-              aria-label={buttonText}
-            >
-              {buttonText}
-            </ActionButton>
-          </Link>
-        </motion.div>
-      </div>
-    </motion.section>
-  );
-};
-
+// src/components/ProgramsCarousel.tsx
+"use client";
+
+import Link from 'next/link';
+import { PrevButton, NextButton, ActionButton } from "@/components/other/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/other/card';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { PROGRAM_CAROUSEL } from './constants/programCarousel'; 
+
+const staggerChildren = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.3,
+    },
+  },
+};
+
+const childVariant = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: 'easeOut' },
+  },
+};
+
+interface Program {
+  title: string;
+  video: string;
+  poster: string;
+  description: string;
+  link: string;
+}
+
+interface ProgramsCarouselProps {
+  programs?: Program[];
+  sectionTitle?: string;
+  buttonText?: string;
+  buttonLink?: string;
+}
+
+// Separate component for each slide
+const ProgramSlide = ({ program }: { program: Program }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const handleMouseEnter = () => {
+    if (videoRef.current) {
+      videoRef.current.play().catch((error) => console.error(PROGRAM_CAROUSEL.ERRORS.VIDEO_PLAY_ERROR, error));
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  };
+
+  return (
+    <motion.div
+      className="embla__slide flex-[0_0_100%] max-[640px]:h-[400px] sm:flex-[0_0_33.333333%] sm:h-[900px] w-full flex items-center justify-center"
+      variants={childVariant}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Card className="bg-white/90 w-full max-[640px]:h-[400px] sm:h-[900px] flex flex-col border-none pb-6 sm:pb-12 shadow-lg hover:shadow-xl transition-shadow duration-300">
+        <div className="relative w-full max-[640px]:h-[280px] sm:h-[800px]">
+          <video
+            ref={videoRef}
+            src={program.video}
+            poster={program.poster}
+            className="w-full h-full object-cover"
+            muted
+            playsInline
+            loop
+          />
+        </div>
+        <CardHeader className="flex-shrink-0 max-[640px]">
+          <CardTitle className="max-[640px]:text-xl sm:text-3xl font-bold text-center">
+            {program.title}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex-grow flex items-center justify-center max-[640px]">
+          <CardDescription className="max-[640px]:text-lg sm:text-lg text-gray-800 text-center line-clamp-3">
+            {program.description}
+          </CardDescription>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+};
+
+const ProgramsCarousel = ({
+  programs = [
+    {
+      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[0],
+      video: '',
+      poster: '',
+      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[0],
+      link: '/',
+    },
+    {
+      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[1],
+      video: '',
+      poster: '',
+      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[1],
+      link: '/',
+    },
+    {
+      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[2],
+      video: '',
+      poster: '',
+      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[2],
+      link: '/',
+    },
+    {
+      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[3],
+      video: '',
+      poster: '',
+      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[3],
+      link: '/',
+    },
+    {
+      title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[4],
+      video: '',
+      poster: '',
+      description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[4],
+      link: '/',
+    },
+  ],
+  sectionTitle = PROGRAM_CAROUSEL.UI.SECTION_TITLE,
+  buttonText = PROGRAM_CAROUSEL.UI.VIEW_ALL_BUTTON_TEXT,
+  buttonLink = '/',
+}: ProgramsCarouselProps) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'start', containScroll: 'trimSnaps', slidesToScroll: 1 });
+  const [canPrev, setCanPrev] = useState(false);
+  const [canNext, setCanNext] = useState(true);
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev();
+  }, [emblaApi]);
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext();
+  }, [emblaApi]);
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setCanPrev(emblaApi.canScrollPrev());
+    setCanNext(emblaApi.canScrollNext());
+  }, [emblaApi]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    emblaApi.on('select', onSelect);
+    emblaApi.on('reInit', onSelect);
+    onSelect();
+
+    emblaApi.reInit();
+    emblaApi.scrollTo(0, false);
+
+    const handleResize = () => emblaApi.reInit();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [emblaApi, onSelect]);
+
+  return (
+    <motion.section
+      className="w-full bg-white/80 relative overflow-hidden p-0 m-0"
+      initial="hidden"
+      whileInView="visible"
+    >
+      <div className="w-full py-12 sm:py-24 m-0">
+        <motion.h2 className="text-4xl sm:text-6xl font-bold text-center mb-8">
+          {sectionTitle}
+        </motion.h2>
+        <div className="embla relative border-none outline-none w-full" ref={emblaRef}>
+          <motion.div
+            className="embla__container flex gap-0 w-full"
+            variants={staggerChildren}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+          >
+            {programs.map((program, index) => (
+              <ProgramSlide key={index} program={program} />
+            ))}
+          </motion.div>
+          <PrevButton
+            className="absolute left-0 top-1/2 transform -translate-y-1/2 p-2 rounded-r-full"
+            onClick={scrollPrev}
+            disabled={!canPrev}
+            aria-label={PROGRAM_CAROUSEL.BUTTONS.PREVIOUS_SLIDE_ARIA}
+          >
+            <ChevronLeft size={24} />
+          </PrevButton>
+          <NextButton
+            className="absolute right-0 top-1/2 transform -translate-y-1/2 p-2 rounded-l-full"
+            onClick={scrollNext}
+            disabled={!canNext}
+            aria-label={PROGRAM_CAROUSEL.BUTTONS.NEXT_SLIDE_ARIA}
+          >
+            <ChevronRight size={24} />
+          </NextButton>
+        </div>
+        <motion.div
+          className="mt-8 text-center"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.6, ease: 'easeOut' }}
+        >
+          <Link href={buttonLink}>
+            <ActionButton
+              className="hover:scale-110 hover:shadow-lg hover:shadow-gray-800"
+              aria-label={buttonText}
+            >
+              {buttonText}
+            </ActionButton>
+          </Link>
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
+
 export default ProgramsCarousel;

package/components/addOns/non-functional/imageCarousels/constants/programCarousel.ts

@@ -1,40 +1,40 @@
-// components/addOns/non-functional/imageCarousels/constants/programCarousel.ts
-// Constants for hardcoded text in ProgramsCarousel.tsx, organized by purpose
-
-export const PROGRAM_CAROUSEL = {
-  // UI Text for ProgramsCarousel
-  UI: {
-    // Default program titles
-    PROGRAM_TITLES: [
-      "Program One",
-      "Program Two",
-      "Program Three",
-      "Program Four",
-      "Program Five",
-    ],
-    // Default program descriptions
-    PROGRAM_DESCRIPTIONS: [
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
-      "Duis aute irure dolor in reprehenderit in voluptate velit.",
-      "Excepteur sint occaecat cupidatat non proident.",
-    ],
-    // Default section title
-    SECTION_TITLE: "Our Programs",
-    // Default button text (also used as aria-label)
-    VIEW_ALL_BUTTON_TEXT: "View All Programs",
-  },
-  // Button Text for ProgramsCarousel
-  BUTTONS: {
-    // Aria-label for previous button
-    PREVIOUS_SLIDE_ARIA: "Previous slide",
-    // Aria-label for next button
-    NEXT_SLIDE_ARIA: "Next slide",
-  },
-  // Error Messages for ProgramsCarousel
-  ERRORS: {
-    // Console error message for video playback failure
-    VIDEO_PLAY_ERROR: "Video play error:",
-  },
+// components/addOns/non-functional/imageCarousels/constants/programCarousel.ts
+// Constants for hardcoded text in ProgramsCarousel.tsx, organized by purpose
+
+export const PROGRAM_CAROUSEL = {
+  // UI Text for ProgramsCarousel
+  UI: {
+    // Default program titles
+    PROGRAM_TITLES: [
+      "Program One",
+      "Program Two",
+      "Program Three",
+      "Program Four",
+      "Program Five",
+    ],
+    // Default program descriptions
+    PROGRAM_DESCRIPTIONS: [
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
+      "Duis aute irure dolor in reprehenderit in voluptate velit.",
+      "Excepteur sint occaecat cupidatat non proident.",
+    ],
+    // Default section title
+    SECTION_TITLE: "Our Programs",
+    // Default button text (also used as aria-label)
+    VIEW_ALL_BUTTON_TEXT: "View All Programs",
+  },
+  // Button Text for ProgramsCarousel
+  BUTTONS: {
+    // Aria-label for previous button
+    PREVIOUS_SLIDE_ARIA: "Previous slide",
+    // Aria-label for next button
+    NEXT_SLIDE_ARIA: "Next slide",
+  },
+  // Error Messages for ProgramsCarousel
+  ERRORS: {
+    // Console error message for video playback failure
+    VIDEO_PLAY_ERROR: "Video play error:",
+  },
 };

package/components/addOns/non-functional/imageCarousels/constants/programSlider.ts

@@ -1,37 +1,37 @@
-// components/addOns/non-functional/imageCarousels/constants/programSlider.ts
-// Constants for hardcoded text in ProductSlider.tsx, organized by purpose
-
-export const PROGRAM_SLIDER = {
-  // UI Text for ProductSlider
-  UI: {
-    // Default product names
-    PRODUCT_NAMES: [
-      "Product One",
-      "Product Two",
-      "Product Three",
-      "Product Four",
-      "Product Five",
-      "Product Six",
-    ],
-    // Default product descriptions
-    PRODUCT_DESCRIPTIONS: [
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      "Sed do eiusmod tempor incididunt ut labore et dolore.",
-      "Ut enim ad minim veniam, quis nostrud exercitation.",
-      "Duis aute irure dolor in reprehenderit in voluptate velit.",
-      "Excepteur sint occaecat cupidatat non proident.",
-      "Sunt in culpa qui officia deserunt mollit anim id est laborum.",
-    ],
-  },
-  // Button Text for ProductSlider
-  BUTTONS: {
-    // Aria-label for previous button
-    PREVIOUS_PRODUCT_ARIA: "Previous product",
-    // Aria-label for next button
-    NEXT_PRODUCT_ARIA: "Next product",
-  },
-  // Error Messages for ProductSlider
-  ERRORS: {
-    // No hardcoded errors
-  },
+// components/addOns/non-functional/imageCarousels/constants/programSlider.ts
+// Constants for hardcoded text in ProductSlider.tsx, organized by purpose
+
+export const PROGRAM_SLIDER = {
+  // UI Text for ProductSlider
+  UI: {
+    // Default product names
+    PRODUCT_NAMES: [
+      "Product One",
+      "Product Two",
+      "Product Three",
+      "Product Four",
+      "Product Five",
+      "Product Six",
+    ],
+    // Default product descriptions
+    PRODUCT_DESCRIPTIONS: [
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      "Sed do eiusmod tempor incididunt ut labore et dolore.",
+      "Ut enim ad minim veniam, quis nostrud exercitation.",
+      "Duis aute irure dolor in reprehenderit in voluptate velit.",
+      "Excepteur sint occaecat cupidatat non proident.",
+      "Sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    ],
+  },
+  // Button Text for ProductSlider
+  BUTTONS: {
+    // Aria-label for previous button
+    PREVIOUS_PRODUCT_ARIA: "Previous product",
+    // Aria-label for next button
+    NEXT_PRODUCT_ARIA: "Next product",
+  },
+  // Error Messages for ProductSlider
+  ERRORS: {
+    // No hardcoded errors
+  },
 };

package/components/addOns/non-functional/spinner.tsx

@@ -1,22 +1,22 @@
-"use client";
-
-import { motion } from "framer-motion";
-
-const spinnerVariants = {
-  animate: {
-    rotate: 360,
-    transition: { duration: 1, repeat: Infinity, ease: "linear" },
-  },
-};
-
-export default function Spinner() {
-  return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gray-900/80 z-50">
-      <motion.div
-        variants={spinnerVariants}
-        animate="animate"
-        className="w-12 h-12 border-4 border-t-4 border-gray-300 border-t-blue-500 rounded-full"
-      />
-    </div>
-  );
+"use client";
+
+import { motion } from "framer-motion";
+
+const spinnerVariants = {
+  animate: {
+    rotate: 360,
+    transition: { duration: 1, repeat: Infinity, ease: "linear" },
+  },
+};
+
+export default function Spinner() {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-gray-900/80 z-50">
+      <motion.div
+        variants={spinnerVariants}
+        animate="animate"
+        className="w-12 h-12 border-4 border-t-4 border-gray-300 border-t-blue-500 rounded-full"
+      />
+    </div>
+  );
 }