Toolbar

1'use client'
2
3import React, { useState } from 'react'
4import {
5    AlignCenter,
6    AlignLeft,
7    AlignRight,
8    Bold,
9    Italic,
10    Strikethrough,
11    Underline,
12} from 'lucide-react'
13
14import {
15    ToolbarButton,
16    ToolbarLink,
17    ToolbarRoot,
18    ToolbarSeparator,
19    ToolbarToggleGroup,
20    ToolbarToggleItem,
21} from '@/components/ui/toolbar'
22
23export function ToolbarDemo() {
24    const [alignment, setAlignment] = useState<'left' | 'center' | 'right'>(
25        'left',
26    )
27
28    return (
29        <ToolbarRoot className="flex h-full flex-wrap items-center gap-2 rounded-md border bg-white p-2 shadow-sm">
30            <ToolbarButton title="Bold">
31                <Bold className="h-4 w-4" />
32            </ToolbarButton>
33            <ToolbarButton title="Italic">
34                <Italic className="h-4 w-4" />
35            </ToolbarButton>
36            <ToolbarButton title="Underline">
37                <Underline className="h-4 w-4" />
38            </ToolbarButton>
39            <ToolbarButton title="Strikethrough">
40                <Strikethrough className="h-4 w-4" />
41            </ToolbarButton>
42
43            <ToolbarSeparator orientation="vertical" />
44
45            <ToolbarToggleGroup
46                type="single"
47                value={alignment}
48                onValueChange={(value: 'left' | 'center' | 'right') =>
49                    setAlignment(value)
50                }
51                aria-label="Text alignment"
52            >
53                <ToolbarToggleItem value="left" title="Align Left">
54                    <AlignLeft className="h-4 w-4" />
55                </ToolbarToggleItem>
56                <ToolbarToggleItem value="center" title="Align Center">
57                    <AlignCenter className="h-4 w-4" />
58                </ToolbarToggleItem>
59                <ToolbarToggleItem value="right" title="Align Right">
60                    <AlignRight className="h-4 w-4" />
61                </ToolbarToggleItem>
62            </ToolbarToggleGroup>
63
64            <ToolbarSeparator orientation="vertical" />
65
66            <ToolbarLink href="/components" title="Go to Components">
67                Components
68            </ToolbarLink>
69            <ToolbarSeparator orientation="vertical" />
70            <ToolbarButton className="bg-primary h-full w-auto px-2 py-1 text-white">
71                Share
72            </ToolbarButton>
73        </ToolbarRoot>
74    )
75}
76

1'use client'
2
3import React from 'react'
4import { Check, Plus, Printer, Upload } from 'lucide-react'
5
6import {
7    ToolbarButton,
8    ToolbarInput,
9    ToolbarRoot,
10} from '@/components/ui/toolbar'
11
12export function ToolbarCustom() {
13    return (
14        <ToolbarRoot className="flex flex-wrap items-center gap-2 rounded-md border bg-white p-2 shadow-sm sm:flex-nowrap">
15            <ToolbarButton title="New">
16                <Plus className="h-4 w-4" />
17            </ToolbarButton>
18            <ToolbarButton title="Print">
19                <Printer className="h-4 w-4" />
20            </ToolbarButton>
21            <ToolbarButton title="Upload">
22                <Upload className="h-4 w-4" />
23            </ToolbarButton>
24
25            <ToolbarInput type="text" placeholder="Search..." />
26            <ToolbarButton
27                title="Save"
28                className="flex h-8 w-auto items-center justify-between gap-1 px-2 text-sm"
29            >
30                <Check className="h-4 w-4" />
31                Save
32            </ToolbarButton>
33        </ToolbarRoot>
34    )
35}
36