Search

import { Search } from '@vtex/shoreline'

export default function Example() {
  return <Search />
}

import { Search } from '@vtex/shoreline'

export default function Example() {
  return <Search disabled />
}

import { Search } from '@vtex/shoreline'

export default function Example() {
  return <Search loading />
}

import { Search } from '@vtex/shoreline'

export default function Example() {
  return (
    <Search
      messages={{
        placeholder: 'Search products or categories',
      }}
    />
  )
}

import { useState, useEffect } from 'react'
import { Search } from '@vtex/shoreline'

export default function Example() {
  const [searchValue, setSearchValue] = useState('')
  const [debouncedValue, setDebouncedValue] = useState('')
  const [isSearching, setIsSearching] = useState(false)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value)
  }

  const handleClear = () => {
    setSearchValue('')
  }

  // Simulate API search with debounce
  useEffect(() => {
    setIsSearching(true)
    const timer = setTimeout(() => {
      setDebouncedValue(searchValue)
      setIsSearching(false)
    }, 500)

    return () => {
      clearTimeout(timer)
    }
  }, [searchValue])

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <Search
        value={searchValue}
        onChange={handleChange}
        onClear={handleClear}
        loading={isSearching}
      />
      {debouncedValue && !isSearching && (
        <div>Search results for: {debouncedValue}</div>
      )}
    </div>
  )
}

import { useState } from 'react'
import { Search } from '@vtex/shoreline'

export default function Example() {
  const [searchValue, setSearchValue] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value)
  }

  const handleClear = () => {
    setSearchValue('')
  }

  return (
    <Search value={searchValue} onChange={handleChange} onClear={handleClear} />
  )
}

import { useState } from 'react'
import {
  Collection,
  CollectionRow,
  Search,
  Table,
  TableHeader,
  TableHeaderCell,
  TableRow,
  TableBody,
  TableCell,
  Pagination,
} from '@vtex/shoreline'

export default function Example() {
  const [searchValue, setSearchValue] = useState('')
  const [currentPage, setCurrentPage] = useState(1)

  // Mock data
  const allItems = [
    { id: 1, name: 'Product A', category: 'Electronics' },
    { id: 2, name: 'Product B', category: 'Furniture' },
    { id: 3, name: 'Device C', category: 'Electronics' },
    { id: 4, name: 'Item D', category: 'Clothing' },
    { id: 5, name: 'Gadget E', category: 'Electronics' },
  ]

  // Filter items based on search
  const filteredItems = allItems.filter((item) => {
    if (!searchValue) return true

    return (
      item.name.toLowerCase().includes(searchValue.toLowerCase()) ||
      item.category.toLowerCase().includes(searchValue.toLowerCase())
    )
  })

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value)
    setCurrentPage(1) // Reset to first page when searching
  }

  const handleClear = () => {
    setSearchValue('')
    setCurrentPage(1)
  }

  return (
    <Collection>
      <CollectionRow>
        <Search
          value={searchValue}
          onChange={handleSearchChange}
          onClear={handleClear}
          messages={{ placeholder: 'Search products or categories' }}
        />
      </CollectionRow>

      <Table
        columnWidths={[
          'minmax(min-content, auto)',
          'minmax(min-content, auto)',
          'minmax(min-content, auto)',
        ]}
      >
        <TableHeader>
          <TableRow>
            <TableHeaderCell>ID</TableHeaderCell>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Category</TableHeaderCell>
          </TableRow>
        </TableHeader>
        <TableBody>
          {filteredItems.map((item) => (
            <TableRow key={item.id}>
              <TableCell>{item.id}</TableCell>
              <TableCell>{item.name}</TableCell>
              <TableCell>{item.category}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      {filteredItems.length > 0 && (
        <CollectionRow align="flex-end">
          <Pagination
            page={currentPage}
            onPageChange={(page) => setCurrentPage(page)}
            total={filteredItems.length}
            size={10}
          />
        </CollectionRow>
      )}
    </Collection>
  )
}