PROMPT PUBLIÉ PAR LA SOURCE
Create an interactive command-k / Raycast-inspired Action Search Bar component in React using Tailwind CSS and Lucide React icons. Features an expandable input field with shortcut keys (⌘K, ⌘cmd+p), dynamic action list with icons and descriptions, categorized actions (Operator, Agent, Command), keyboard navigation, and smooth expand/collapse transition.
React + Tailwind CSS · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.
LE CODE DU COMPOSANT (REACT / TAILWIND / TSX)
import { ActionSearchBar } from "@/components/ui/action-search-bar"
import {
BarChart2,
Globe,
Video,
PlaneTakeoff,
AudioLines,
} from "lucide-react";
function actionSearchBarDemo() {
const allActions = [
{
id: "1",
label: "Book tickets",
icon: <PlaneTakeoff className="h-4 w-4 text-blue-500" />,
description: "Operator",
short: "⌘K",
end: "Agent",
},
{
id: "2",
label: "Summarize",
icon: <BarChart2 className="h-4 w-4 text-orange-500" />,
description: "gpt-4o",
short: "⌘cmd+p",
end: "Command",
},
{
id: "3",
label: "Screen Studio",
icon: <Video className="h-4 w-4 text-purple-500" />,
description: "gpt-4o",
short: "",
end: "Application",
},
{
id: "4",
label: "Talk to Jarvis",
icon: <AudioLines className="h-4 w-4 text-green-500" />,
description: "gpt-4o voice",
short: "",
end: "Active",
},
{
id: "5",
label: "Translate",
icon: <Globe className="h-4 w-4 text-blue-500" />,
description: "gpt-4o",
short: "",
end: "Command",
},
];
return <ActionSearchBar actions={allActions} />
}
export { actionSearchBarDemo }React + Tailwind CSS · Fichier source du composant. Les imports et dépendances indiqués sont nécessaires à son intégration.
Consulter la source ↗21st (Dorian Baffier)
La source est indiquée pour consulter le contexte et les conditions de réutilisation.
← Continuer à explorer