Pages
=====

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} />