Klyv State View

import { useState } from "react";
import { Inbox } from "lucide-react";
import { Button } from "@/components/ui/klyv-state-view-utils/components-Button-Button";
import { Card } from "@/components/ui/klyv-state-view-utils/components-Card-Card";
import { SegmentedControl } from "@/components/ui/klyv-state-view-utils/components-SegmentedControl-SegmentedControl";
import { StateView } from "@/components/ui/klyv-state-view";
import { Text } from "@/components/ui/klyv-state-view-utils/components-Text-Text";
import { type ViewStatus } from "@/components/ui/klyv-state-view";

function StateViewExample() {
  const [status, setStatus] = useState<ViewStatus>('ready')
  const data = status === 'ready' ? ['a', 'b', 'c'] : status === 'empty' ? [] : undefined

  return (
    <div className="flex w-full flex-col gap-3">
      <SegmentedControl
        label="State"
        size="sm"
        value={status}
        onValueChange={(value) => setStatus(value as ViewStatus)}
        className="self-start"
        options={[
          { value: 'loading', label: 'Loading' },
          { value: 'empty', label: 'Empty' },
          { value: 'error', label: 'Error' },
          { value: 'ready', label: 'Ready' },
        ]}
      />
      <Card title="Recent transactions" className="w-full">
        <StateView
          data={data}
          status={status}
          className="mt-2"
          skeleton={
            <div className="flex flex-col gap-3 py-2">
              {[0, 1, 2].map((index) => (
                <div key={index} className="flex items-center gap-3">
                  <span className="size-9 shrink-0 animate-pulse rounded-full bg-surface-muted" />
                  <span className="h-3 w-1/3 animate-pulse rounded bg-surface-muted" />
                  <span className="ml-auto h-3 w-16 animate-pulse rounded bg-surface-muted" />
                </div>
              ))}
            </div>
          }
          empty={{
            icon: Inbox,
            title: 'No transactions yet',
            description: 'Once money moves in or out, it will appear here with a running balance.',
            action: <Button size="sm">Make a transfer</Button>,
          }}
          error={{
            title: 'Could not load transactions',
            description: 'Your balance is unaffected.',
            detail: 'TXN_SERVICE_TIMEOUT / req_8f21c4',
          }}
          onRetry={
            <Button size="sm" variant="outline" onClick={() => setStatus('ready')}>
              Try again
            </Button>
          }
        >
          {(rows) => (
            <div className="flex flex-col gap-2 py-2">
              {rows.map((row) => (
                <Text key={row} size="body">
                  Transaction {row.toUpperCase()}
                </Text>
              ))}
            </div>
          )}
        </StateView>
      </Card>
    </div>
  )
}

export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><StateViewExample /></div></div>}