Nothing yet, and nothing found

// apps/docs/examples/ui/empty.tsx'use client';
import {useState} from 'react';import {FolderOpenIcon, SearchXIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Empty,  EmptyContent,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from '@workspace/active-ui/components/primitives/empty';
/** * What a list shows when it has nothing to show, and why: no records yet, * with the action that creates the first; and no results for a search, with * the way back. An empty state is no loading state. */export default function EmptyExample() {  const [query, setQuery] = useState('rotterdam');  return (    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">      <Empty className="border">        <EmptyHeader>          <EmptyMedia variant="icon">            <FolderOpenIcon aria-hidden />          </EmptyMedia>          <EmptyTitle>No schemes yet</EmptyTitle>          <EmptyDescription>            Create a scheme to add participants and send statements.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <Button>Create a scheme</Button>        </EmptyContent>      </Empty>      <Empty className="border">        <EmptyHeader>          <EmptyMedia variant="icon">            <SearchXIcon aria-hidden />          </EmptyMedia>          <EmptyTitle>            {query ? `Nothing matches “${query}”` : 'Search cleared'}          </EmptyTitle>          <EmptyDescription>            Check the spelling, or search for a participant number instead.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <Button            variant="outline"            disabled={!query}            onClick={() => setQuery('')}          >            Clear the search          </Button>        </EmptyContent>      </Empty>    </div>  );}