{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-model",
  "title": "Input Model",
  "description": "component for the Input Model Demo",
  "registryDependencies": [
    "input",
    "label",
    "select",
    "button",
    "tab",
    "avatar",
    "badge"
  ],
  "files": [
    {
      "path": "app/registry/input-model/inputmodel.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Select, SelectContent, SelectItem, SelectTrigger } from \"@/components/ui/select\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Headphones,\n  X,\n  FileText,\n  ChevronDown,\n  ArrowDownNarrowWide,\n  Upload,\n  Link,\n  FolderOpen,\n  Search,\n  Play,\n  Clock,\n  Globe,\n  Youtube,\n  FileImage,\n  Copy,\n  Star,\n} from \"lucide-react\"\n\ninterface Project {\n  id: string\n  name: string\n  type: \"pdf\" | \"url\" | \"audio\"\n  size?: string\n  duration?: string\n  createdAt: string\n  thumbnail?: string\n  status: \"completed\" | \"processing\" | \"draft\"\n}\n\nconst mockProjects: Project[] = [\n  {\n    id: \"1\",\n    name: \"Future Thinking Talk.pdf\",\n    type: \"pdf\",\n    size: \"45.4 KB\",\n    createdAt: \"2 hours ago\",\n    status: \"completed\",\n  },\n  {\n    id: \"2\",\n    name: \"AI Revolution Article\",\n    type: \"url\",\n    duration: \"12:34\",\n    createdAt: \"1 day ago\",\n    status: \"completed\",\n  },\n  {\n    id: \"3\",\n    name: \"Tech Trends 2024\",\n    type: \"audio\",\n    duration: \"8:45\",\n    createdAt: \"3 days ago\",\n    status: \"processing\",\n  },\n  {\n    id: \"4\",\n    name: \"Climate Change Report\",\n    type: \"pdf\",\n    size: \"2.1 MB\",\n    createdAt: \"1 week ago\",\n    status: \"draft\",\n  },\n]\n\nexport default function InputModel() {\n  const [isOpen, setIsOpen] = useState(true)\n  const [activeTab, setActiveTab] = useState(\"upload\")\n  const [urlInput, setUrlInput] = useState(\"\")\n  const [searchQuery, setSearchQuery] = useState(\"\")\n  const [selectedProject, setSelectedProject] = useState<string | null>(null)\n  const [selected, setSelected] = useState(\"morgan\");\n  const [selected2, setSelected2] = useState(\"\");\n  const [selected3, setSelected3] = useState(\"\");\n  const [selected4, setSelected4] = useState(\"\");\n  const [selected5, setSelected5] = useState(\"\");\n  const [selected6, setSelected6] = useState(\"\");\n\n\n\n\n\n  const filteredProjects = mockProjects.filter((project) =>\n    project.name.toLowerCase().includes(searchQuery.toLowerCase()),\n  )\n\n  const getProjectIcon = (type: string) => {\n    switch (type) {\n      case \"pdf\":\n        return <FileText className=\"w-4 h-4\" />\n      case \"url\":\n        return <Globe className=\"w-4 h-4\" />\n      case \"audio\":\n        return <Headphones className=\"w-4 h-4\" />\n      default:\n        return <FileText className=\"w-4 h-4\" />\n    }\n  }\n\n  const getStatusColor = (status: string) => {\n    switch (status) {\n      case \"completed\":\n        return \"bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400\"\n      case \"processing\":\n        return \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400\"\n      case \"draft\":\n        return \"bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400\"\n      default:\n        return \"bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400\"\n    }\n  }\n\n  if (!isOpen) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Button onClick={() => setIsOpen(true)}>Open Audio Show Creator</Button>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex items-center justify-center p-4 \">\n      <Card className=\"w-full max-w-xl max-h-[90vh] overflow-y-auto rounded-3xl shadow-2xl border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950\">\n        <CardContent className=\"p-4 sm:p-6 lg:p-8 h-full overflow-y-auto\">\n          <div className=\"flex items-start justify-between mb-6\">\n            <div className=\"flex gap-3 sm:gap-4 flex-1\">\n              <div className=\"w-10 h-10 sm:w-12 sm:h-12 bg-neutral-800 dark:bg-neutral-700 rounded-2xl flex items-center justify-center shrink-0\">\n                <Headphones className=\"w-5 h-5 sm:w-6 sm:h-6 text-white\" />\n              </div>\n              <div className=\"flex-1 min-w-0\">\n                <h1 className=\"text-base sm:text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100\">\n                  Create Your Audio Show\n                </h1>\n                <p className=\"text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed font-normal\">\n                  Drop a document or paste a link — GenFM will instantly turn it into\n               a fully voiced podcast you can preview, edit, and download.\n                </p>\n              </div>\n            </div>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => setIsOpen(false)}\n              className=\"text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 -mt-2 -mr-2 shrink-0\"\n            >\n              <X className=\"w-5 h-5\" />\n            </Button>\n          </div>\n          <Tabs value={activeTab} onValueChange={setActiveTab} className=\"mb-6 sm:mb-8\">\n            <TabsList className=\"grid w-full grid-cols-3 rounded-xl p-1 bg-neutral-100 dark:bg-neutral-800\">\n              <TabsTrigger\n                value=\"upload\"\n                className=\"rounded-lg font-medium text-xs sm:text-sm data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:data-[state=active]:bg-neutral-700 dark:data-[state=active]:text-neutral-100\"\n              >\n                <Upload className=\"w-4 h-4 mr-1 sm:mr-2\" />\n                <span className=\"hidden sm:inline\">Upload File</span>\n                <span className=\"sm:hidden\">Upload</span>\n              </TabsTrigger>\n              <TabsTrigger\n                value=\"url\"\n                className=\"rounded-lg font-medium text-xs sm:text-sm data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:data-[state=active]:bg-neutral-700 dark:data-[state=active]:text-neutral-100\"\n              >\n                <Link className=\"w-4 h-4 mr-1 sm:mr-2\" />\n                <span className=\"hidden sm:inline\">Import via URL</span>\n                <span className=\"sm:hidden\">URL</span>\n              </TabsTrigger>\n              <TabsTrigger\n                value=\"existing\"\n                className=\"rounded-lg font-medium text-xs sm:text-sm data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:data-[state=active]:bg-neutral-700 dark:data-[state=active]:text-neutral-100\"\n              >\n                <FolderOpen className=\"w-4 h-4 mr-1 sm:mr-2\" />\n                <span className=\"hidden sm:inline\">Choose Existing</span>\n                <span className=\"sm:hidden\">Existing</span>\n              </TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"upload\" className=\"mt-6\">\n              <div className=\"border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl p-8 text-center bg-neutral-50 dark:bg-neutral-900/50\">\n                <div className=\"w-12 h-12 bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center justify-center mx-auto mb-4\">\n                  <Upload className=\"w-6 h-6 text-neutral-600 dark:text-neutral-400\" />\n                </div>\n                <h3 className=\"text-lg font-medium mb-2 text-neutral-900 dark:text-neutral-100\">Drop your file here</h3>\n                <p className=\"text-neutral-600 dark:text-neutral-400 mb-4\">Support for PDF, DOCX, TXT files up to 10MB</p>\n                <Button variant=\"outline\" className=\"border-neutral-300 dark:border-neutral-700 bg-transparent\">\n                  Browse Files\n                </Button>\n              </div>\n            </TabsContent>\n            <TabsContent value=\"url\" className=\"mt-6\">\n              <div className=\"space-y-4\">\n                <div>\n                  <Label htmlFor=\"url-input\" className=\"text-sm font-medium text-neutral-900 dark:text-neutral-100\">\n                    Content URL\n                  </Label>\n                  <div className=\"mt-2\">\n                    <Input\n                      id=\"url-input\"\n                      type=\"url\"\n                      placeholder=\"https://example.com/article or YouTube URL\"\n                      value={urlInput}\n                      onChange={(e) => setUrlInput(e.target.value)}\n                      className=\"w-full h-12 rounded-xl border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900\"\n                    />\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n                  <div className=\"flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50\">\n                    <Globe className=\"w-4 h-4 text-neutral-600 dark:text-neutral-400\" />\n                    <span className=\"text-xs text-neutral-600 dark:text-neutral-400\">Articles</span>\n                  </div>\n                  <div className=\"flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50\">\n                    <Youtube className=\"w-4 h-4 text-neutral-600 dark:text-neutral-400\" />\n                    <span className=\"text-xs text-neutral-600 dark:text-neutral-400\">YouTube</span>\n                  </div>\n                  <div className=\"flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50\">\n                    <FileText className=\"w-4 h-4 text-neutral-600 dark:text-neutral-400\" />\n                    <span className=\"text-xs text-neutral-600 dark:text-neutral-400\">Blogs</span>\n                  </div>\n                  <div className=\"flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50\">\n                    <FileImage className=\"w-4 h-4 text-neutral-600 dark:text-neutral-400\" />\n                    <span className=\"text-xs text-neutral-600 dark:text-neutral-400\">News</span>\n                  </div>\n                </div>\n                {urlInput && (\n                  <div className=\"p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50\">\n                    <div className=\"flex items-center gap-3\">\n                      <div className=\"w-8 h-8 bg-neutral-200 dark:bg-neutral-800 rounded-lg flex items-center justify-center\">\n                        <Globe className=\"w-4 h-4 text-neutral-600 dark:text-neutral-400\" />\n                      </div>\n                      <div className=\"flex-1 min-w-0\">\n                        <p className=\"text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate\">\n                          Ready to import content\n                        </p>\n                        <p className=\"text-xs text-neutral-600 dark:text-neutral-400 truncate\">{urlInput}</p>\n                      </div>\n                    </div>\n                  </div>\n                )}\n              </div>\n            </TabsContent>\n            <TabsContent value=\"existing\" className=\"mt-6\">\n              <div className=\"space-y-4\">\n                <div className=\"relative\">\n                  <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-neutral-400\" />\n                  <Input\n                    placeholder=\"Search projects...\"\n                    value={searchQuery}\n                    onChange={(e) => setSearchQuery(e.target.value)}\n                    className=\"pl-10 h-12 rounded-xl border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900\"\n                  />\n                </div>\n                <div className=\"max-h-64 overflow-y-auto space-y-2\">\n                  {filteredProjects.map((project) => (\n                    <div\n                      key={project.id}\n                      onClick={() => setSelectedProject(project.id)}\n                      className={`p-4 rounded-xl border cursor-pointer transition-all ${\n                        selectedProject === project.id\n                          ? \"border-neutral-400 dark:border-neutral-600 bg-neutral-100 dark:bg-neutral-800\"\n                          : \"border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 bg-white dark:bg-neutral-900/50\"\n                      }`}\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <div className=\"w-8 h-8 bg-neutral-200 dark:bg-neutral-800 rounded-lg flex items-center justify-center\">\n                          {getProjectIcon(project.type)}\n                        </div>\n                        <div className=\"flex-1 min-w-0\">\n                          <div className=\"flex items-center gap-2 mb-1\">\n                            <p className=\"text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate\">\n                              {project.name}\n                            </p>\n                            <Badge className={`text-xs px-2 py-0.5 ${getStatusColor(project.status)}`}>\n                              {project.status}\n                            </Badge>\n                          </div>\n                          <div className=\"flex items-center gap-4 text-xs text-neutral-600 dark:text-neutral-400\">\n                            <span className=\"flex items-center gap-1\">\n                              <Clock className=\"w-3 h-3\" />\n                              {project.createdAt}\n                            </span>\n                            {project.size && <span>{project.size}</span>}\n                            {project.duration && (\n                              <span className=\"flex items-center gap-1\">\n                                <Play className=\"w-3 h-3\" />\n                                {project.duration}\n                              </span>\n                            )}\n                          </div>\n                        </div>\n                        <div className=\"flex items-center gap-1\">\n                          <Button variant=\"ghost\" size=\"icon\" className=\"w-8 h-8\">\n                            <Copy className=\"w-3 h-3\" />\n                          </Button>\n                          <Button variant=\"ghost\" size=\"icon\" className=\"w-8 h-8\">\n                            <Star className=\"w-3 h-3\" />\n                          </Button>\n                        </div>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </TabsContent>\n          </Tabs>\n          <div className=\"space-y-6\">\n            <div>\n              <Label className=\"block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100\">Format Style</Label>\n              <Select defaultValue=\"default\" onValueChange={setSelected5}>\n                <SelectTrigger className=\"w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900\">\n                  <div className=\"flex items-center justify-between w-full\">\n                    <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">{selected5||\"Interview Mode\"}</span>\n                    <div className=\"bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 px-2 py-1 mr-2 rounded-md text-xs\">\n                      Default\n                    </div>\n                  </div>\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"default\">Interview Mode</SelectItem>\n                  <SelectItem value=\"narrative\">Narrative Style</SelectItem>\n                  <SelectItem value=\"discussion\">Panel Discussion</SelectItem>\n                  <SelectItem value=\"monologue\">Solo Monologue</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6\">\n              <div>\n                <Label className=\"block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100\">Host Voice</Label>\n                <Select defaultValue=\"alex\" onValueChange={setSelected2}>\n                  <SelectTrigger className=\"w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900\">\n                    <div className=\"flex items-center gap-3\">\n                      <Avatar className=\"w-6 h-6\">\n                        <AvatarImage src=\"/voice1.png\" alt=\"Alex\" />\n                      </Avatar>\n                      <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">{selected2 || \"alex\"}</span>\n                    </div>\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"alex\">Alex</SelectItem>\n                    <SelectItem value=\"sarah\">Sarah</SelectItem>\n                    <SelectItem value=\"mike\">Mike</SelectItem>\n                    <SelectItem value=\"emma\">Emma</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div>\n                <Label className=\"block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100\">Guest Voice</Label>\n                <Select defaultValue=\"morgan\" onValueChange={setSelected}>\n                  <SelectTrigger className=\"w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900\">\n                    <div className=\"flex items-center gap-3\">\n                      <Avatar className=\"w-6 h-6\">\n                      <AvatarImage src=\"/voice2.png\" alt=\"Morgan\" />\n                      </Avatar>\n                      <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">{selected}</span>\n                    </div>\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"morgan\">Morgan</SelectItem>\n                    <SelectItem value=\"jordan\">Jordan</SelectItem>\n                    <SelectItem value=\"taylor\">Taylor</SelectItem>\n                    <SelectItem value=\"casey\">Casey</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6\">\n              <div>\n                <Label className=\"block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100\">\n                  Voice Engine\n                </Label>\n                <Select defaultValue=\"eleven-v2\" onValueChange={setSelected3}>\n                  <SelectTrigger className=\"w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900\">\n                    <div className=\"flex items-center justify-between w-full\">\n                      <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">{selected3||\"Eleven AI v2\"}</span>\n                      <div className=\"bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 px-2 py-1 mr-2 rounded-md text-xs\">\n                        Multilingual\n                      </div>\n                    </div>\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"eleven-v2\">Eleven AI v2</SelectItem>\n                    <SelectItem value=\"eleven-v1\">Eleven AI v1</SelectItem>\n                    <SelectItem value=\"openai\">OpenAI TTS</SelectItem>\n                    <SelectItem value=\"azure\">Azure Speech</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div>\n                <Label className=\"block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100\">Language</Label>\n                <Select defaultValue=\"auto\" onValueChange={setSelected4}>\n                  <SelectTrigger className=\"w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900\">\n                    <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">{selected4||\"Auto-detect\"}</span>\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"auto\">Auto-detect</SelectItem>\n                    <SelectItem value=\"english\">English</SelectItem>\n                    <SelectItem value=\"spanish\">Spanish</SelectItem>\n                    <SelectItem value=\"french\">French</SelectItem>\n                    <SelectItem value=\"german\">German</SelectItem>\n                    <SelectItem value=\"italian\">Italian</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div>\n              <Label className=\"block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100\">Audio Quality</Label>\n              <Select defaultValue=\"studio\" onValueChange={setSelected6}>\n                <SelectTrigger className=\"w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900\">\n                  <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">{selected6||\"Studio Quality\"}</span>\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"studio\">Studio Quality</SelectItem>\n                  <SelectItem value=\"high\">High Quality</SelectItem>\n                  <SelectItem value=\"standard\">Standard Quality</SelectItem>\n                  <SelectItem value=\"compressed\">Compressed</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n          <div className=\"flex flex-col sm:flex-row justify-end gap-3 sm:gap-5 mt-8 pt-6 border-t border-neutral-200 dark:border-neutral-800\">\n            <Button\n              variant=\"outline\"\n              className=\"rounded-xl px-4 sm:px-6 h-12 border-neutral-300 dark:border-neutral-700 bg-transparent text-sm flex items-center justify-center order-2 sm:order-1\"\n            >\n              <ArrowDownNarrowWide className=\"h-4 w-4 mr-2\" />\n              Recent\n              <ChevronDown className=\"w-4 h-4 ml-2\" />\n            </Button>\n            <Button className=\"bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-100 dark:hover:bg-neutral-200 dark:text-neutral-900 text-white rounded-xl px-6 sm:px-8 h-12 font-medium order-1 sm:order-2\">\n              Generate\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/inputmodel.tsx"
    }
  ],
  "type": "registry:component"
}