Search results

npx shadcn add @klarhimmel/app-search-results

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import AppSearchResults from '@/components/klarhimmel/blocks/app-search-results';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <AppSearchResults props={{
          "eyebrow": "Exempelhotellet",
          "title": "Search the hotel",
          "description": "Rooms, treatments and events in one place.",
          "searchLabel": "Search",
          "searchButton": "Search",
          "query": "spa",
          "facets": [
            {
              "name": "Type",
              "options": [
                {
                  "label": "Treatments",
                  "checked": false
                },
                {
                  "label": "Rooms",
                  "checked": false
                },
                {
                  "label": "Events",
                  "checked": false
                }
              ]
            },
            {
              "name": "Price",
              "options": [
                {
                  "label": "Under 1 000 kr",
                  "checked": false
                },
                {
                  "label": "1 000 kr or more",
                  "checked": false
                }
              ]
            }
          ],
          "results": [
            {
              "title": "Spa day for two",
              "summary": "Pool, sauna and a sixty-minute treatment each, with lunch in the garden room.",
              "href": "#spa-day",
              "meta": "Treatments · 1 800 kr",
              "matches": [
                "Treatments",
                "1 000 kr or more"
              ]
            },
            {
              "title": "Deep tissue massage",
              "summary": "Sixty minutes with a therapist, booked in the spa on the ground floor.",
              "href": "#massage",
              "meta": "Treatments · 890 kr",
              "matches": [
                "Treatments",
                "Under 1 000 kr"
              ]
            },
            {
              "title": "Room 311, balcony and bath",
              "summary": "A double room with spa access included for every night of your stay.",
              "href": "#room-311",
              "meta": "Rooms · 1 490 kr",
              "matches": [
                "Rooms",
                "1 000 kr or more"
              ]
            },
            {
              "title": "Spa weekend for groups",
              "summary": "Eight to twenty guests: treatments, dinner and a guided morning swim.",
              "href": "#group-weekend",
              "meta": "Events · 14 500 kr",
              "matches": [
                "Events",
                "1 000 kr or more"
              ]
            },
            {
              "title": "Spa gift card",
              "summary": "A card for any treatment, valid for twelve months and sent by email.",
              "href": "#gift-card",
              "meta": "Treatments · 500 kr",
              "matches": [
                "Treatments",
                "Under 1 000 kr"
              ]
            }
          ],
          "resultsLabel": "results",
          "singular": "result",
          "forLabel": "for",
          "removeLabel": "Remove filter",
          "clearAll": "Clear all filters",
          "filtersLabel": "Filters",
          "noResults": {
            "title": "Nothing matches that search",
            "hint": "Check the spelling, use fewer words or remove a filter.",
            "suggestionsLabel": "Try one of these"
          },
          "suggestions": [
            "massage",
            "sauna",
            "weekend"
          ],
          "state": "filled",
          "messages": {
            "loading": "Searching…",
            "error": "The search failed. Try again.",
            "retry": "Try again"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}