Cards Slider

1"use client";
2 
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Badge } from "@/components/ui/badge";
5import { Card } from "@/components/ui/card";
6import { animate, motion, useMotionValue } from "framer-motion";
7import { ChevronLeft, ChevronRight, Clock } from "lucide-react";
8import { useEffect, useRef, useState } from "react";
9 
10interface CardData {
11  id: number;
12  title: string;
13  description: string;
14  category: string;
15  image: string;
16  author: {
17    name: string;
18    avatar: string;
19  };
20  date: string;
21  readTime: string;
22}
23 
24const cards: CardData[] = [
25  {
26    id: 1,
27    title: "Liquid Motion",
28    description:
29      "Experience the fluid dynamics of modern web interactions with physics-based animations.",
30    category: "Animation",
31    image:
32      "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80",
33    author: { name: "Alex Rivera", avatar: "https://github.com/shadcn.png" },
34    date: "Dec 12, 2024",
35    readTime: "5 min read",
36  },
37  {
38    id: 2,
39    title: "Glassmorphism",
40    description:
41      "Blur the lines between layers with advanced backdrop filters and transparency effects.",
42    category: "Design",
43    image:
44      "https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=800&q=80",
45    author: { name: "Sarah Chen", avatar: "https://github.com/shadcn.png" },
46    date: "Dec 10, 2024",
47    readTime: "4 min read",
48  },
49  {
50    id: 3,
51    title: "Dark Mode",
52    description:
53      "Easy on the eyes, elegant in appearance. A seamless transition to the dark side.",
54    category: "Theme",
55    image:
56      "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=800&q=80",
57    author: { name: "Mike Johnson", avatar: "https://github.com/shadcn.png" },
58    date: "Dec 8, 2024",
59    readTime: "6 min read",
60  },
61  {
62    id: 4,
63    title: "Micro-Interactions",
64    description:
65      "Delightful details that make the difference between good and great user experience.",
66    category: "UX",
67    image:
68      "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=800&q=80",
69    author: { name: "Emily Davis", avatar: "https://github.com/shadcn.png" },
70    date: "Dec 5, 2024",
71    readTime: "3 min read",
72  },
73  {
74    id: 5,
75    title: "Responsive Layouts",
76    description:
77      "Fluid grids that adapt to any screen size, ensuring your content looks perfect everywhere.",
78    category: "Layout",
79    image:
80// … truncated