Sheet
Sheet is like modal, but it's used to display content that complements the main content of the screen.
Installation
CLI
Manual
npx hq-kit add sheet
Basic
Preview
Code
Controlled
Preview
Code
Side
Preview
Code
Floating
Preview
Code
Sticky
You can use the Sheet.Body
component to make body of the sheet sticky.
Preview
Code
Triggered By Menu
Preview
Code
It might be a good idea to extract the sheet into a separate component for better organization.
This action works both for Modal
and Sheet
component.
Look at these example
interface SheetActionProps {
state: string
onOpenChange: (state: string) => void
actionType: { description: string; action: () => void; confirmText: string; title: string }
disabled: boolean
}
const SheetAction = (props: SheetActionProps) => (
<Sheet.Content isOpen={props.state !== ''} onOpenChange={props.onOpenChange}>
<Sheet.Header>
<Sheet.Title>{props.actionType?.title}</Sheet.Title>
<Sheet.Description>{props.actionType?.description}</Sheet.Description>
</Sheet.Header>
<Sheet.Footer>
<Button slot='close' variant='outline'>
Cancel
</Button>
<Button
variant={props.state === 'restore' ? 'primary' : 'danger'}
isDisabled={loading}
isPending={loading}
onPress={actions(state)?.action}
>
{actions(state)?.confirmText}
</Button>
</Sheet.Footer>
</Sheet.Content>
)
Then you can use it like this.
<SheetAction
state={state}
onOpenChange={closeSheet}
actionType={actionType(state)}
disabled={loading}
/>
With that, now we can modify the actionType
function to return the initial state.
const actionType = (t: string) => {
const initialsState = {
title: '',
description: '',
confirmText: '',
action: () => {}
}
switch (t) {
case 'delete': ...
case 'ban': ...
case 'restore': ...
default:
return initialsState
}
}