2025-06-29 21:33:12 -03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Should work on mobile also
|
|
|
|
|
|
|
|
|
2025-06-29 11:58:23 -03:00
|
|
|
|
|
|
|
Use themes variables
|
|
|
|
--------------------
|
|
|
|
|
|
|
|
background
|
|
|
|
foreground
|
|
|
|
card
|
|
|
|
card
|
|
|
|
popover
|
|
|
|
popover
|
|
|
|
primary
|
|
|
|
primary
|
|
|
|
secondary
|
|
|
|
secondary
|
|
|
|
muted
|
|
|
|
muted
|
|
|
|
accent
|
|
|
|
accent
|
|
|
|
destructive
|
|
|
|
destructive
|
|
|
|
border
|
|
|
|
input
|
|
|
|
ring
|
|
|
|
radius
|
|
|
|
chart
|
|
|
|
chart
|
|
|
|
chart
|
|
|
|
chart
|
|
|
|
chart
|
|
|
|
|
|
|
|
|
|
|
|
Use resizable where is possible
|
|
|
|
--------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
ResizableHandle,
|
|
|
|
ResizablePanel,
|
|
|
|
ResizablePanelGroup,
|
|
|
|
} from "@/components/ui/resizable"
|
|
|
|
|
|
|
|
Use shortcuts on footer
|
|
|
|
-----------------------
|
|
|
|
|
|
|
|
const shortcuts = [
|
|
|
|
[
|
|
|
|
{ key: 'Q', label: 'Rename', action: () => console.log('Rename') },
|
|
|
|
{ key: 'W', label: 'View', action: () => console.log('View') },
|
|
|
|
{ key: 'E', label: 'Edit', action: () => console.log('Edit') },
|
|
|
|
{ key: 'I', label: 'Cut', action: () => console.log('Cut') },
|
|
|
|
{ key: 'O', label: 'Paste', action: () => console.log('Paste') },
|
|
|
|
{ key: 'P', label: 'Duplicate', action: () => console.log('Duplicate') },
|
|
|
|
],
|
|
|
|
[
|
|
|
|
{ key: 'K', label: 'Star', action: () => console.log('Star') },
|
|
|
|
{ key: 'L', label: 'Download', action: () => console.log('Download') },
|
|
|
|
{ key: 'Z', label: 'Upload', action: () => console.log('Upload') },
|
|
|
|
{ key: 'X', label: 'Refresh', action: () => console.log('Refresh') },
|
|
|
|
]
|
|
|
|
];
|
|
|
|
<Footer shortcuts={shortcuts} />
|
|
|
|
|