Draggable Cards

import { DraggableCards } from "@/components/ui/DraggableCards";



  const Cards = [
    {
      id: 1,
      title: "Project Alpha",
      description: "High-priority development task with tight deadline",
    },
    {
      id: 2,
      title: "Design Review",
      description: "UI/UX review session for the new dashboard",
    },
    {
      id: 3,
      title: "Code Review",
      description: "Review pull requests from the development team",
    },
    {
      id: 4,
      title: "Team Meeting",
      description: "Weekly sync with the entire development team",
    },
  ];


export const DefaultDraggableCardsExample = () => {
  return <DraggableCards cards={Cards} />;
};

import { DraggableCards } from "@/components/ui/DraggableCards";

export const HorizontalDraggableCardsExample = () => {
  const horizontalCards = [
    {
      id: 1,
      title: "Project Alpha",
      description: "High-priority development task with tight deadline",
    },
    {
      id: 2,
      title: "Design Review",
      description: "UI/UX review session for the new dashboard",
    },
    {
      id: 3,
      title: "Code Review",
      description: "Review pull requests from the development team",
    },
    {
      id: 4,
      title: "Team Meeting",
      description: "Weekly sync with the entire development team",
    },
  ];

  return <DraggableCards cards={horizontalCards} horizontal />;
};

import { DraggableCards } from "@/components/ui/DraggableCards";

export const BorderedDraggableCardsExample = () => {
  const borderedCards = [
    {
      id: 1,
      title: "Marketing Campaign",
      description:
        "Launch the new product marketing campaign across all channels",
    },
    {
      id: 2,
      title: "Customer Support",
      description: "Respond to customer inquiries and resolve pending tickets",
    },
    {
      id: 3,
      title: "Data Analysis",
      description: "Analyze user behavior data from the past quarter",
    },
  ];

  return <DraggableCards cards={borderedCards} variant="bordered" />;
};

import { useState } from "react";
import { Card ,  DraggableCards } from "@/components/ui/DraggableCards";

export const LargeDraggableCardsExample = () => {
  const [tasks, setTasks] = useState([
    {
      id: 1,
      title: "System Architecture",
      description:
        "Design and implement scalable system architecture for the new platform",
    },
    {
      id: 2,
      title: "Database Optimization",
      description:
        "Optimize database queries and improve overall performance metrics",
    },
  ]);

  const handleReorder = (newTasks) => {
    setTasks(newTasks);
    console.log("Tasks reordered:", newTasks);
  };

  return (
    <DraggableCards
      cards={tasks}
      variant="filled"
      size="lg"
      onReorder={handleReorder}
    />
  );
};