Morphing Search

<script setup lang="ts">
import { MorphingSearchChips } from "@/components/orvui/blocks/morphing-search";
const tileColors = [
  "from-rose-400/40 to-orange-300/30",
  "from-sky-400/40 to-indigo-400/30",
  "from-emerald-400/40 to-teal-300/30",
  "from-amber-300/40 to-rose-300/30",
  "from-violet-400/40 to-fuchsia-300/30",
  "from-teal-300/40 to-sky-300/30",
];
const suggestions = [
  "dashboards",
  "data tables",
  "dark mode",
  "empty states",
  "onboarding",
  "pricing pages",
  "settings",
  "sign in",
];
</script>
<template>
  <div
    class="relative flex h-[440px] w-full max-w-2xl flex-col justify-end overflow-hidden rounded-3xl border border-border bg-muted/40 p-4"
  >
    <div
      aria-hidden="true"
      class="absolute inset-4 grid grid-cols-3 gap-3 opacity-80"
    >
      <div
        v-for="tile in tileColors"
        :key="tile"
        class="rounded-2xl bg-gradient-to-br"
        :class="tile"
      />
    </div>
    <MorphingSearchChips
      class="mx-auto"
      placeholder="Search inspiration"
      label="Search inspiration"
      :default-chips="['onboarding']"
      :default-recents="['dashboards', 'empty states', 'pricing pages']"
      storage-key="orvui:morphing-search-chips:recents"
      :max-chips="4"
      :suggestions="suggestions"
    />
  </div>
</template>

<script setup lang="ts">
import { Blocks, BookOpen, Bot, FolderOpen, Palette } from "lucide-vue-next";
import { MorphingSearch, type MorphingSearchItem } from "@/components/orvui/blocks/morphing-search";
const entries = [
  [
    "project-folder",
    "Project Folder",
    "Block · Files and previews",
    ["files", "overlay"],
    FolderOpen,
  ],
  [
    "motion-components",
    "Motion components",
    "Collection · Interaction primitives",
    ["animation", "components"],
    Blocks,
  ],
  [
    "agent-interfaces",
    "Agent interfaces",
    "Collection · AI building blocks",
    ["ai", "chat"],
    Bot,
  ],
  [
    "installation",
    "Installation guide",
    "Documentation · Add your first component",
    ["setup", "shadcn"],
    BookOpen,
  ],
  [
    "design-tokens",
    "Design tokens",
    "Documentation · Color, type, and motion",
    ["theme", "styles"],
    Palette,
  ],
] as const;
const items: MorphingSearchItem[] = entries.map(
  ([id, title, description, keywords, icon]) => ({
    id,
    title,
    description,
    keywords: [...keywords],
    icon,
  }),
);
</script>
<template>
  <div class="flex w-full max-w-[22rem] items-center gap-3">
    <MorphingSearch
      :items="items"
      placeholder="Find components"
    /><MorphingSearch
      :items="items"
      placeholder="Find components"
      shortcut=""
      icon-only
    />
  </div>
</template>