diff --git a/components/Schemas.tsx b/components/Schemas.tsx index 3c94c0f..e030822 100644 --- a/components/Schemas.tsx +++ b/components/Schemas.tsx @@ -1,18 +1,96 @@ +import CommandPalette, { filterItems, getItemIndex } from "react-cmdk"; import Link from "next/link"; import Links from "./Links"; import toast from "react-hot-toast"; +import useKeypress from "react-use-keypress"; import { Button, Separator, Card } from "@prisma/lens"; import { Layers } from "react-feather"; import { Schema } from "../lib/types"; import { useRouter } from "next/dist/client/router"; import { useSchemaContext } from "../lib/context"; +import { useState } from "react"; export default function Schemas() { const { schemas, setSchemas } = useSchemaContext(); const router = useRouter(); + const [isCommandPaletteOpen, setIsCommandPaletteOpen] = + useState(false); + const [commandPaletteSearch, setCommandPaletteSearch] = useState(""); + + useKeypress("k", (e: KeyboardEvent) => { + if (e.metaKey) { + e.preventDefault(); + e.stopPropagation(); + setIsCommandPaletteOpen((prev) => !prev); + } + }); + + function handleCreateSchema() { + if (schemas.some((schema: Schema) => schema.name === "New schema")) { + toast.error("A schema called New schema exists"); + } else { + const newSchema: Schema = { + database: "postgresql", + name: "New schema", + models: [], + enums: [], + }; + setSchemas([...schemas, newSchema]); + router.push(`/schemas/${newSchema.name}`); + } + } + + const filteredCommandPaletteItems = filterItems( + [ + { + heading: "Quick actions", + id: "quick-actions", + items: [ + { + id: "quick-actions.new-schema", + onClick: handleCreateSchema, + children: "New schema", + icon: "PlusIcon", + keywords: ["*"], + }, + ], + }, + { + heading: "Schemas", + id: "schemas", + items: schemas.map((schema) => ({ + href: `/schemas/${schema.name}`, + children: schema.name, + icon: "CollectionIcon", + id: schema.name, + })), + }, + ], + commandPaletteSearch + ); + return ( <> + + {filteredCommandPaletteItems.map(({ id, items, ...rest }) => ( + + {items.map(({ id, ...rest }) => ( + + ))} + + ))} + +
{schemas.map((schema: Schema) => { @@ -32,20 +110,7 @@ export default function Schemas() {