mirror of
https://github.com/temetro/temetro.git
synced 2026-08-18 06:13:14 +00:00
Add Notes page: Tiptap rich-text editor backed by the notes API
- lib/notes.ts: list/get/create/update/delete via the API client. - New /notes route + nav item (and shared lib/nav.ts entry, i18n key) so it shows in the sidebar and command palette. - components/notes/notes-view.tsx: a note list + "New note", with save/delete and toasts. - components/notes/notes-editor.tsx: a Word-like COSS Toolbar driving Tiptap (StarterKit + Placeholder) — bold/italic/underline, H1–H2, bullet/numbered lists, undo/redo — plus a title field and Save. Installed @coss/toolbar and @coss/toggle-group and the Tiptap packages. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -0,0 +1,225 @@
|
||||
"use client";
|
||||
|
||||
import Placeholder from "@tiptap/extension-placeholder";
|
||||
import { EditorContent, useEditor } from "@tiptap/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import {
|
||||
Bold,
|
||||
Heading1,
|
||||
Heading2,
|
||||
Italic,
|
||||
List,
|
||||
ListOrdered,
|
||||
Redo2,
|
||||
Save,
|
||||
Trash2,
|
||||
Underline as UnderlineIcon,
|
||||
Undo2,
|
||||
} from "lucide-react";
|
||||
import { type ReactNode, useReducer, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Toolbar,
|
||||
ToolbarButton,
|
||||
ToolbarGroup,
|
||||
ToolbarSeparator,
|
||||
} from "@/components/ui/toolbar";
|
||||
import type { Note } from "@/lib/notes";
|
||||
|
||||
function FormatButton({
|
||||
active,
|
||||
disabled,
|
||||
label,
|
||||
onClick,
|
||||
children,
|
||||
}: {
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<ToolbarButton
|
||||
// Keep the editor selection while clicking the toolbar.
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
render={
|
||||
<Button
|
||||
aria-label={label}
|
||||
aria-pressed={active}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant={active ? "secondary" : "ghost"}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</ToolbarButton>
|
||||
);
|
||||
}
|
||||
|
||||
// Word-like rich-text editor for a single note: a COSS Toolbar driving Tiptap
|
||||
// commands, a title field, and Save / Delete. Remount (via a `key` on the
|
||||
// parent) to load a different note.
|
||||
export function NotesEditor({
|
||||
note,
|
||||
saving,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: {
|
||||
note: Note;
|
||||
saving: boolean;
|
||||
onSave: (data: { title: string; content: string }) => void;
|
||||
onDelete?: () => void;
|
||||
}) {
|
||||
const [title, setTitle] = useState(note.title);
|
||||
// Force a re-render on every editor transaction so the toolbar reflects the
|
||||
// current formatting/undo state.
|
||||
const [, bump] = useReducer((n: number) => n + 1, 0);
|
||||
|
||||
const editor = useEditor({
|
||||
content: note.content,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Placeholder.configure({ placeholder: "Write your note…" }),
|
||||
],
|
||||
// Required under Next's SSR to avoid a hydration mismatch.
|
||||
immediatelyRender: false,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
"prose prose-sm dark:prose-invert max-w-none min-h-full focus:outline-none",
|
||||
},
|
||||
},
|
||||
onTransaction: bump,
|
||||
});
|
||||
|
||||
if (!editor) return null;
|
||||
|
||||
const save = () =>
|
||||
onSave({
|
||||
title: title.trim() || "Untitled note",
|
||||
content: editor.getHTML(),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
className="font-medium text-base"
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Note title"
|
||||
value={title}
|
||||
/>
|
||||
{onDelete && (
|
||||
<Button
|
||||
aria-label="Delete note"
|
||||
onClick={onDelete}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
)}
|
||||
<Button disabled={saving} onClick={save} type="button">
|
||||
<Save className="size-4" />
|
||||
{saving ? "Saving…" : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Toolbar className="flex-wrap">
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
active={editor.isActive("bold")}
|
||||
label="Bold"
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
>
|
||||
<Bold />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("italic")}
|
||||
label="Italic"
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
>
|
||||
<Italic />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("underline")}
|
||||
label="Underline"
|
||||
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||||
>
|
||||
<UnderlineIcon />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator orientation="vertical" />
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
active={editor.isActive("heading", { level: 1 })}
|
||||
label="Heading 1"
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleHeading({ level: 1 }).run()
|
||||
}
|
||||
>
|
||||
<Heading1 />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("heading", { level: 2 })}
|
||||
label="Heading 2"
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleHeading({ level: 2 }).run()
|
||||
}
|
||||
>
|
||||
<Heading2 />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator orientation="vertical" />
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
active={editor.isActive("bulletList")}
|
||||
label="Bullet list"
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
>
|
||||
<List />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("orderedList")}
|
||||
label="Numbered list"
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
>
|
||||
<ListOrdered />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator orientation="vertical" />
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
disabled={!editor.can().undo()}
|
||||
label="Undo"
|
||||
onClick={() => editor.chain().focus().undo().run()}
|
||||
>
|
||||
<Undo2 />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
disabled={!editor.can().redo()}
|
||||
label="Redo"
|
||||
onClick={() => editor.chain().focus().redo().run()}
|
||||
>
|
||||
<Redo2 />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
|
||||
<button
|
||||
className="min-h-0 flex-1 cursor-text overflow-y-auto rounded-xl border bg-card p-4 text-left"
|
||||
onClick={() => editor.chain().focus().run()}
|
||||
type="button"
|
||||
>
|
||||
<EditorContent editor={editor} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import { FileText, Plus } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { NotesEditor } from "@/components/notes/notes-editor";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
createNote,
|
||||
deleteNote,
|
||||
listNotes,
|
||||
type Note,
|
||||
updateNote,
|
||||
} from "@/lib/notes";
|
||||
import { notify } from "@/lib/toast";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const newDraft = (): Note => ({
|
||||
id: "",
|
||||
title: "",
|
||||
content: "",
|
||||
createdAt: "",
|
||||
updatedAt: "",
|
||||
});
|
||||
|
||||
export function NotesView() {
|
||||
const [notes, setNotes] = useState<Note[]>([]);
|
||||
const [selected, setSelected] = useState<Note | null>(null);
|
||||
const [draftKey, setDraftKey] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
listNotes()
|
||||
.then((data) => {
|
||||
if (!active) return;
|
||||
setNotes(data);
|
||||
setSelected((current) => current ?? data[0] ?? null);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (active) {
|
||||
notify.error(
|
||||
"Couldn't load notes",
|
||||
err instanceof Error ? err.message : "Please try again.",
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startNew = () => {
|
||||
setSelected(newDraft());
|
||||
setDraftKey((k) => k + 1);
|
||||
};
|
||||
|
||||
const save = async (data: { title: string; content: string }) => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const saved = selected?.id
|
||||
? await updateNote(selected.id, data)
|
||||
: await createNote(data);
|
||||
const list = await listNotes();
|
||||
setNotes(list);
|
||||
setSelected(list.find((n) => n.id === saved.id) ?? saved);
|
||||
notify.success("Note saved");
|
||||
} catch (err) {
|
||||
notify.error(
|
||||
"Couldn't save note",
|
||||
err instanceof Error ? err.message : "Please try again.",
|
||||
);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (id: string) => {
|
||||
try {
|
||||
await deleteNote(id);
|
||||
const list = await listNotes();
|
||||
setNotes(list);
|
||||
setSelected(list[0] ?? null);
|
||||
notify.success("Note deleted");
|
||||
} catch (err) {
|
||||
notify.error(
|
||||
"Couldn't delete note",
|
||||
err instanceof Error ? err.message : "Please try again.",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex h-full w-full max-w-5xl gap-6 px-6 py-8">
|
||||
<aside className="flex w-60 shrink-0 flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-semibold text-lg tracking-tight">Notes</h1>
|
||||
<Button onClick={startNew} size="sm" type="button">
|
||||
<Plus className="size-4" />
|
||||
New
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto">
|
||||
{loading ? (
|
||||
<p className="px-2 py-1.5 text-muted-foreground text-sm">Loading…</p>
|
||||
) : notes.length === 0 ? (
|
||||
<p className="px-2 py-1.5 text-muted-foreground text-sm">
|
||||
No notes yet.
|
||||
</p>
|
||||
) : (
|
||||
notes.map((n) => (
|
||||
<button
|
||||
className={cn(
|
||||
"flex w-full flex-col items-start gap-0.5 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-accent",
|
||||
selected?.id === n.id && "bg-accent",
|
||||
)}
|
||||
key={n.id}
|
||||
onClick={() => setSelected(n)}
|
||||
type="button"
|
||||
>
|
||||
<span className="w-full truncate font-medium text-foreground text-sm">
|
||||
{n.title || "Untitled note"}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{new Date(n.updatedAt).toLocaleDateString()}
|
||||
</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
{selected ? (
|
||||
<NotesEditor
|
||||
key={selected.id || `draft-${draftKey}`}
|
||||
note={selected}
|
||||
onDelete={selected.id ? () => remove(selected.id) : undefined}
|
||||
onSave={save}
|
||||
saving={saving}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
|
||||
<FileText className="size-8" />
|
||||
<p className="text-sm">Select a note or create a new one.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import type { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
||||
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
|
||||
import type { VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Toggle as ToggleComponent,
|
||||
type toggleVariants,
|
||||
} from "@/components/ui/toggle";
|
||||
|
||||
export const ToggleGroupContext: React.Context<
|
||||
VariantProps<typeof toggleVariants>
|
||||
> = React.createContext<VariantProps<typeof toggleVariants>>({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
});
|
||||
|
||||
export function ToggleGroup({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
orientation = "horizontal",
|
||||
children,
|
||||
...props
|
||||
}: ToggleGroupPrimitive.Props &
|
||||
VariantProps<typeof toggleVariants>): React.ReactElement {
|
||||
return (
|
||||
<ToggleGroupPrimitive
|
||||
className={cn(
|
||||
"flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input",
|
||||
orientation === "horizontal"
|
||||
? "*:pointer-coarse:after:min-w-auto"
|
||||
: "*:pointer-coarse:after:min-h-auto",
|
||||
variant === "default"
|
||||
? "gap-0.5"
|
||||
: orientation === "horizontal"
|
||||
? "*:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
|
||||
: "flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
|
||||
className,
|
||||
)}
|
||||
data-size={size}
|
||||
data-slot="toggle-group"
|
||||
data-variant={variant}
|
||||
orientation={orientation}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider value={{ size, variant }}>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToggleGroupItem({
|
||||
className,
|
||||
children,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: TogglePrimitive.Props &
|
||||
VariantProps<typeof toggleVariants>): React.ReactElement {
|
||||
const context = React.useContext(ToggleGroupContext);
|
||||
|
||||
const resolvedVariant = context.variant || variant;
|
||||
const resolvedSize = context.size || size;
|
||||
|
||||
return (
|
||||
<ToggleComponent
|
||||
className={className}
|
||||
data-size={resolvedSize}
|
||||
data-variant={resolvedVariant}
|
||||
size={resolvedSize}
|
||||
variant={resolvedVariant}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleComponent>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToggleGroupSeparator({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: {
|
||||
className?: string;
|
||||
} & React.ComponentProps<typeof Separator>): React.ReactElement {
|
||||
return (
|
||||
<Separator
|
||||
className={cn(
|
||||
"pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32",
|
||||
className,
|
||||
)}
|
||||
orientation={orientation}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { ToggleGroupPrimitive };
|
||||
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import type React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const toggleVariants = cva(
|
||||
"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
|
||||
{
|
||||
defaultVariants: {
|
||||
size: "default",
|
||||
variant: "default",
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
|
||||
lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
|
||||
sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
|
||||
},
|
||||
variant: {
|
||||
default: "border-transparent",
|
||||
outline:
|
||||
"border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export function Toggle({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: TogglePrimitive.Props &
|
||||
VariantProps<typeof toggleVariants>): React.ReactElement {
|
||||
return (
|
||||
<TogglePrimitive
|
||||
className={cn(toggleVariants({ className, size, variant }))}
|
||||
data-slot="toggle"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { TogglePrimitive };
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";
|
||||
import type React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function Toolbar({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Root.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Root
|
||||
className={cn(
|
||||
"relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground",
|
||||
className,
|
||||
)}
|
||||
data-slot="toolbar"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarButton({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Button.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Button
|
||||
className={cn(className)}
|
||||
data-slot="toolbar-button"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarLink({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Link.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Link
|
||||
className={cn(className)}
|
||||
data-slot="toolbar-link"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarInput({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Input.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Input
|
||||
className={cn(className)}
|
||||
data-slot="toolbar-input"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarGroup({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Group.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Group
|
||||
className={cn("flex items-center gap-1", className)}
|
||||
data-slot="toolbar-group"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Separator.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Separator
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
|
||||
className,
|
||||
)}
|
||||
data-slot="toolbar-separator"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { ToolbarPrimitive };
|
||||
Reference in New Issue
Block a user