Empty State

import { EmptyState } from "@/components/ui/empty-state";

const ChartBarPeak = () => (
  <svg
    height="16"
    strokeLinejoin="round"
    viewBox="0 0 16 16"
    width="16"
    className="w-8 h-8"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M14 1V1.75V14.25V15H12.5V14.25V1.75V1H14ZM8.75 6V6.75V14.25V15H7.25V14.25V6.75V6H8.75ZM3.5 10.75V10H2V10.75V14.25V15H3.5V14.25V10.75Z"
    />
  </svg>
);

const LinkIcon = () => (
  <svg
    height="16"
    stroke-linejoin="round"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z"
    />
  </svg>
);

export default function InformationalDemo() {
  return (
    <div className="w-3/4">
        <EmptyState.Root
          description="This should detail the actions you can take on this screen, as well as why it’s valuable."
          icon={<EmptyState.Icon icon={<ChartBarPeak />} />}
          title="Title"
        >
          <button>Primary Action</button>
          <a
            href="/"
            className="inline-flex items-center gap-0.5 !no-underline text-sm text-accents-5 fill-accents-5 hover:text-foreground hover:fill-foreground duration-100"
          >
            Learn more
            <LinkIcon />
          </a>
        </EmptyState.Root>
    </div>
  )
}