Cards

"use client";

import { BalanceCard } from "@/components/premium/cards";

export function BalanceCardPreview() {
  return (
    <div className="flex w-full justify-center px-4 py-10 sm:px-8 sm:py-16">
      <BalanceCard />
    </div>
  );
}

"use client";

import { CompactCard } from "@/components/premium/cards";

const PEOPLE = [
  {
    name: "Maya Chen",
    avatarUrl: "https://api.dicebear.com/10.x/notionists/svg?seed=Maya",
  },
  {
    name: "Theo Martin",
    avatarUrl: "https://api.dicebear.com/10.x/notionists/svg?seed=Theo",
  },
  {
    name: "June Park",
    avatarUrl: "https://api.dicebear.com/10.x/notionists/svg?seed=June",
  },
];

export function CompactCardPreview() {
  return (
    <div className="flex w-full justify-center px-4 py-10 sm:px-8 sm:py-16">
      <CompactCard people={PEOPLE} />
    </div>
  );
}

"use client";

import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { Button } from "@/components/motion/button/base";
import { InviteCard } from "@/components/premium/cards";
import { EASE_OUT } from "@/lib/ease";

export function InviteCardPreview() {
  const [visible, setVisible] = useState(true);

  return (
    <div className="flex min-h-[46rem] w-full items-center justify-center px-4 py-10 sm:px-8 sm:py-14">
      <AnimatePresence mode="wait">
        {visible ? (
          <motion.div
            key="card"
            exit={{ opacity: 0, scale: 0.96 }}
            transition={{ duration: 0.2, ease: EASE_OUT }}
            className="w-full max-w-md"
          >
            <InviteCard onDismiss={() => setVisible(false)} />
          </motion.div>
        ) : (
          <motion.div
            key="restore"
            initial={{ opacity: 0, scale: 0.96 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.25, ease: EASE_OUT }}
          >
            <Button variant="outline" onClick={() => setVisible(true)}>
              Show invite card
            </Button>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

"use client";

import { FolderCard } from "@/components/premium/cards";

export function FolderCardPreview() {
  return (
    <div className="flex w-full justify-center px-4 py-10 sm:px-8 sm:py-16">
      <FolderCard />
    </div>
  );
}

"use client";

import { StoryCard } from "@/components/premium/cards";

export function StoryCardPreview() {
  return (
    <div className="flex w-full justify-center px-4 py-10 sm:px-8 sm:py-16">
      <StoryCard />
    </div>
  );
}

"use client";

import { ProfileCard } from "@/components/premium/cards";

export function ProfileCardPreview() {
  return (
    <div className="flex w-full justify-center px-4 py-10 sm:px-8 sm:py-16">
      <ProfileCard />
    </div>
  );
}