Sheet
Sheet is like modal, but it's used to display content that complements the main content of the screen.

Installation

In the terminal, run the following command to begin:
npx hq-kit add sheet

Basic

Controlled

Side

Floating

Sticky

You can use the Sheet.Body component to make body of the sheet sticky.

Triggered By Menu

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