@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +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>
+  );
+};
+
+export default ProgramsCarousel;

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

@@ -0,0 +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:",
+  },
+};

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

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

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

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