Empty State

import { EmptyState, Button } from "astralis-ui";
import { Inbox } from "lucide-react";

// No "use client": EmptyState is pure composition and ships zero client JS.
export function EmptyStateDemo() {
  return (
    <EmptyState>
      <EmptyState.Indicator>
        <Inbox />
      </EmptyState.Indicator>
      <EmptyState.Title>No messages yet</EmptyState.Title>
      <EmptyState.Description>
        When someone writes to you, the conversation will show up here.
      </EmptyState.Description>
      <EmptyState.Actions>
        <Button size="sm">New message</Button>
        <Button size="sm" variant="outline" colorScheme="gray">
          Invite people
        </Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}

import { EmptyState, Flex } from "astralis-ui";
import { SearchX } from "lucide-react";

export function EmptyStateSizes() {
  return (
    <Flex gap="6" alignItems="start" wrap="wrap">
      {(["sm", "md", "lg"] as const).map((size) => (
        <EmptyState key={size} size={size}>
          <EmptyState.Indicator>
            <SearchX />
          </EmptyState.Indicator>
          <EmptyState.Title>No results</EmptyState.Title>
          <EmptyState.Description>size=&quot;{size}&quot;</EmptyState.Description>
        </EmptyState>
      ))}
    </Flex>
  );
}