AnimatedList

"use client";
import { CaretRightIcon } from "@phosphor-icons/react";
import { Button, AnimatedList, AnimatedListItem } from "@g4rcez/components";
import Link from "next/link"; // Assuming Link is available or adjust based on project context

function BasicAnimatedList() {
  return (
    <AnimatedList>
      <AnimatedListItem
        title="Animated list"
        description="Click here and open a modal"
        leading={({ open }) => (
          <Button onClick={open} theme="raw">
            <CaretRightIcon aria-hidden />
          </Button>
        )}
      >
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
        tempor incidunt ut labore et dolore magna aliqua.
      </AnimatedListItem>
      <AnimatedListItem
        title="Form"
        description="All elements that you need"
        leading={({ open }) => (
          <Button onClick={open} theme="raw">
            <CaretRightIcon aria-hidden />
          </Button>
        )}
      >
        <ul className="space-y-4">
          <li>Input with mask</li>
          <li>Select</li>
          <li>Autocomplete</li>
          <li>DatePicker</li>
          <li>
            <Link
              href="/docs/form"
              className="hover:underline hover:text-primary transition-all ease-normal"
            >
              useForm
            </Link>
          </li>
        </ul>
      </AnimatedListItem>
      <AnimatedListItem
        title="Another Animated list"
        description="Click here and open a modal"
        leading={({ open }) => (
          <Button onClick={open} theme="raw">
            <CaretRightIcon aria-hidden />
          </Button>
        )}
      >
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
        tempor incidunt ut labore et dolore magna aliqua.
      </AnimatedListItem>
    </AnimatedList>
  );
}