Feedback Components

import { Alert } from '@gtcx/ui';
 
<Alert type="success" message="Changes saved successfully" />
<Alert type="warning" message="Your session expires in 5 minutes" />
<Alert type="error" message="Failed to save" description="Please try again" closable />
<Alert type="info" message="New version available" />

import { Dialog } from '@gtcx/ui';
 
<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <Dialog.Trigger>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Confirm Action</Dialog.Title>
      <Dialog.Description>This action cannot be undone.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Button variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
      <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>

import { AlertDialog } from '@gtcx/ui';
 
<AlertDialog>
  <AlertDialog.Trigger>
    <Button variant="destructive">Delete</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Title>Are you sure?</AlertDialog.Title>
    <AlertDialog.Description>This will permanently delete the record.</AlertDialog.Description>
    <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
    <AlertDialog.Action onClick={handleDelete}>Delete</AlertDialog.Action>
  </AlertDialog.Content>
</AlertDialog>

import { Sheet } from '@gtcx/ui';
 
<Sheet side="right">
  <Sheet.Trigger><Button>Open Panel</Button></Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header><Sheet.Title>Details</Sheet.Title></Sheet.Header>
    <div>Panel content here</div>
  </Sheet.Content>
</Sheet>

import { Tooltip } from '@gtcx/ui';
 
<Tooltip content="Copy to clipboard">
  <Button variant="ghost" size="icon"><CopyIcon /></Button>
</Tooltip>

import { Popover } from '@gtcx/ui';
 
<Popover>
  <Popover.Trigger><Button>Settings</Button></Popover.Trigger>
  <Popover.Content>
    <p>Popover content</p>
  </Popover.Content>
</Popover>

import { HoverCard } from '@gtcx/ui';
 
<HoverCard>
  <HoverCard.Trigger>@janedoe</HoverCard.Trigger>
  <HoverCard.Content>
    <Avatar src="/jane.jpg" />
    <p>Jane Doe — Product Manager</p>
  </HoverCard.Content>
</HoverCard>

import { Accordion } from '@gtcx/ui';
 
<Accordion type="single" collapsible>
  <Accordion.Item value="faq-1">
    <Accordion.Trigger>What is Ledger UI?</Accordion.Trigger>
    <Accordion.Content>A design system built on React and Ant Design.</Accordion.Content>
  </Accordion.Item>
</Accordion>

import { Progress } from '@gtcx/ui';
 
<Progress value={65} />
<Progress value={100} status="success" />

import { toast } from '@gtcx/ui';
 
toast.success('Record saved');
toast.error('Failed to delete');
toast.info('New update available');