Search Results Tabs

import { useState } from 'react'
import SearchResultsTabs, { SearchResultItem } from '@/components/ui/search-results-tabs'

const searchItems: SearchResultItem[] = [
  {
    id: 'postqued',
    type: 'web',
    source: 'Postqued',
    title: 'Postqued - Social Media Workspace for Teams and AI Agents',
    description:
      'Postqued is a shared social media workspace where teams and AI agents plan, approve, and publish across 10 networks using the dashboard, API or MCP.',
    url: 'https://postqued.com/',
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/53/5305f956c0a22bc99192f35d798be78af37b9fdd79efb842d6bcc566e2e61227.svg"
        alt=""
        className="size-4 object-contain dark:invert"
      />
    ),
  },
  {
    id: 'studyboost',
    type: 'web',
    source: 'Studyboost',
    title: 'Studyboost \u2014 AI-Powered Study Tools for Students',
    description:
      'Upload your notes, textbooks, and slides. Get AI-generated flashcards, quizzes, summaries, and answers that cite your exact sources.',
    url: 'https://studyboost.org/',
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/50/50b30435bff131be1111b3f9f6a9dcfeb6360edb23a4aeb353f87460d0229827.svg"
        alt=""
        className="size-4 scale-150 object-contain dark:invert"
      />
    ),
  },
  {
    id: 'aismartdecor',
    type: 'web',
    source: 'AI Smart Decor',
    title: 'AI Smart Decor - AI Interior Design From a Photo',
    description:
      'Upload a photo of any room and redesign it with AI: virtual staging, wall recoloring and a wide range of interior styles.',
    url: 'https://aismartdecor.com/',
    icon: <img src="https://cdn.21st.dev/assets/mirror/11/11d7d3046b20f23402857cf1a5415aea25aaf884a7e31d56714015c47394e086.svg" alt="" className="size-4 object-contain" />,
  },
  {
    id: 'workspace-1',
    type: 'images',
    source: 'Unsplash',
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/0c/0c01689d29d7987bba2c6c536ebbddc9a72ed112c0105ad1f1e56bc82ebf3774.svg"
        alt=""
        className="size-4 object-contain dark:invert"
      />
    ),
    title: 'Minimal home office',
    url: 'https://unsplash.com/photos/modern-laptop-and-keyboard-on-a-home-office-desk-vR2kup7Uyds',
    image: '/images/search/workspace-1.jpg',
    imageAlt: 'Minimal home office',
  },
  {
    id: 'workspace-2',
    type: 'images',
    source: 'Unsplash',
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/0c/0c01689d29d7987bba2c6c536ebbddc9a72ed112c0105ad1f1e56bc82ebf3774.svg"
        alt=""
        className="size-4 object-contain dark:invert"
      />
    ),
    title: 'A creative workspace',
    url: 'https://unsplash.com/photos/modern-workspace-with-a-laptop-and-desk-setup-JGKPDKiqJVw',
    image: '/images/search/workspace-2.jpg',
    imageAlt: 'A creative workspace',
  },
  {
    id: 'workspace-3',
    type: 'images',
    source: 'Unsplash',
    icon: (
      <img
        src="https://cdn.21st.dev/assets/mirror/0c/0c01689d29d7987bba2c6c536ebbddc9a72ed112c0105ad1f1e56bc82ebf3774.svg"
        alt=""
        className="size-4 object-contain dark:invert"
      />
    ),
    title: 'Desk setup with books',
    url: 'https://unsplash.com/photos/a-modern-desk-setup-with-laptop-and-books-xjyHDnA93Pk',
    image: '/images/search/workspace-3.jpg',
    imageAlt: 'Desk setup with books',
  },
  {
    type: 'news',
    id: 'bbc',
    source: 'BBC',
    title: 'Shaun the Sheep creators say AI will never replace storytelling as new film launches',
    description:
      'The Bristol animation studio explores the craft of storytelling as the latest Shaun the Sheep film arrives in cinemas.',
    url: '#',
    publishedLabel: '16 hours ago',
    icon: <img src="https://cdn.21st.dev/assets/mirror/47/47d2138ffddac3ba598ad056b27d348de4fe14d3a61a7e193aae51b77f7164d0.svg" alt="" className="size-4 object-contain" />,
  },
  {
    type: 'news',
    id: 'sky-news',
    source: 'Sky News',
    title: 'AI latest: King joins debate as ChatGPT maker discovers concerning message',
    description:
      'King Charles brings AI leaders together for a summit as companies face fresh questions about safety and control.',
    url: '#',
    publishedLabel: '1 day ago',
    icon: <img src="https://cdn.21st.dev/assets/mirror/2c/2c2e5146660a0a0c30d1e2e4e08c8b6feff067ba81b9bb4c631d4aec68089fbc.svg" alt="" className="size-4 object-contain" />,
  },
  {
    type: 'news',
    id: 'cnbc',
    source: 'CNBC',
    title:
      'OpenAI\u2019s latest AI revelation is a serious situation, Microsoft\u2019s Suleyman tells CNBC',
    description:
      'Microsoft AI chief Mustafa Suleyman discusses new safety concerns and the need to keep increasingly powerful AI systems aligned with people.',
    url: '#',
    publishedLabel: '14 hours ago',
    icon: <img src="https://cdn.21st.dev/assets/mirror/d9/d9ecd195df285e384702e326dcf25bf70c2c396d1b53382ed8a20e61d51fb3ee.svg" alt="" className="size-4 object-contain" />,
  },
]

export default function Demo() {
  const [activeType, setActiveType] = useState<SearchResultItem['type']>('web')
  return (
    <div data-demo-stage className="flex min-h-[420px] w-full items-center justify-center p-10">
      <div className="min-h-[37rem] w-full max-w-3xl">
        <SearchResultsTabs
          showTabs
          activeType={activeType}
          onActiveTypeChange={setActiveType}
          items={searchItems}
          query="Tools for product teams"
        />
      </div>
    </div>
  )
}