1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
"use client";
import { Bold, Copy, Italic, Trash2, Underline } from "lucide-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
Toolbar,
ToolbarButton,
ToolbarLink,
ToolbarSeparator,
} from "@/components/ui/toolbar";
export default function ToolbarBasicPreview() {
return (
<Toolbar aria-label="Formatting">
<ToggleGroup multiple spacing={0.5} aria-label="Text style">
<ToggleGroupItem value="bold" aria-label="Bold">
<Bold />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Italic">
<Italic />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Underline">
<Underline />
</ToggleGroupItem>
</ToggleGroup>
<ToolbarSeparator />
<ToolbarButton aria-label="Copy">
<Copy />
</ToolbarButton>
<ToolbarButton variant="ghost-destructive" aria-label="Delete">
<Trash2 />
</ToolbarButton>
<ToolbarSeparator />
<ToolbarLink href="#">Edited 5m ago</ToolbarLink>
</Toolbar>
);
}
