"use client";
import * as React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info";
const container: Record<Color, string> = {
  primary: "bg-primary-container text-on-primary-container",
  secondary: "bg-secondary-container text-on-secondary-container",
  tertiary: "bg-tertiary-container text-on-tertiary-container",
  accent: "bg-accent-container text-on-accent-container",
  success: "bg-success-container text-on-success-container",
  warning: "bg-warning-container text-on-warning-container",
  danger: "bg-danger-container text-on-danger-container",
  info: "bg-info-container text-on-info-container",
};

export function Empty({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      data-slot="empty"
      className={cn("flex w-full flex-col items-center justify-center gap-6 rounded-xl bg-surface-sunken p-10 text-center shadow-well", className)}
      {...p}
    />
  );
}
export function EmptyHeader({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex max-w-sm flex-col items-center gap-2", className)} {...p} />;
}
/** Floating role-coloured tile. Put a duotone Phosphor icon inside. */
export function EmptyMedia({
  className,
  color = "primary",
  children,
}: { className?: string; color?: Color; children?: React.ReactNode }) {
  return (
    <motion.div
      className={cn(
        "mb-2 grid size-20 place-items-center rounded-[1.6rem] shadow-clay [&_svg]:size-10",
        container[color],
        className
      )}
      animate={{ y: [0, -6, 0], rotate: [-2, 2, -2] }}
      transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
    >
      {children}
    </motion.div>
  );
}
export function EmptyTitle({ className, ...p }: React.HTMLAttributes<HTMLHeadingElement>) {
  return <h3 className={cn("text-xl font-extrabold tracking-tight text-on-surface", className)} {...p} />;
}
export function EmptyDescription({ className, ...p }: React.HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn("text-sm font-medium text-on-surface-muted", className)} {...p} />;
}
export function EmptyContent({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex flex-wrap items-center justify-center gap-3", className)} {...p} />;
}
No bills yet

Installation

No bills yet
