Search

import {Search} from '@earendil-works/elanor-react';

export default function SearchDemo() {
  return <Search aria-label="Search projects" placeholder="Search projects" />;
}

import {Search, Stack} from '@earendil-works/elanor-react';

export default function SearchDensity() {
  return (
    <Stack align="stretch">
      <Search aria-label="Search projects, default" placeholder="Default" />
      <Search density="compact" aria-label="Search projects, compact" placeholder="Compact" />
    </Stack>
  );
}

import {CloseIcon} from '@earendil-works/elanor-icons-react';
import {IconButton, Search, Stack, Text} from '@earendil-works/elanor-react';
import {useRef, useState} from 'react';

const projects = ['Website redesign', 'Design system', 'Release notes'];

export default function SearchFilter() {
  const [query, setQuery] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const matches = projects.filter((project) =>
    project.toLowerCase().includes(query.trim().toLowerCase()),
  );

  return (
    <Stack gap="medium">
      <Search
        ref={inputRef}
        aria-label="Search projects"
        placeholder="Search projects"
        value={query}
        onValueChange={setQuery}
        endAdornment={
          query ? (
            <IconButton
              aria-label="Clear search"
              onClick={() => {
                setQuery('');
                inputRef.current?.focus();
              }}
            >
              <CloseIcon />
            </IconButton>
          ) : null
        }
      />
      <Text role="status">
        {matches.length
          ? `${matches.length} matching ${matches.length === 1 ? 'project' : 'projects'}`
          : 'No matching projects.'}
      </Text>
      {matches.length > 0 ? (
        <ul>
          {matches.map((project) => (
            <li key={project}>{project}</li>
          ))}
        </ul>
      ) : null}
    </Stack>
  );
}