Quick Actions

Installation

Variants

Props

Files installed (1)

• components/blocks/QuickActions.tsx1.5 kB

  Copy

  import * as React from 'react'
  import { ArrowUpRight } from 'lucide-react'
  import type { LucideIcon } from 'lucide-react'
  import { SectionCard } from '@/components/ui/section-card'
  import { IconBox } from '@/components/ui/icon-box'
  
  export interface QuickActionsProps {
    title?: string
    description?: string
    className?: string
    children?: React.ReactNode
  }
  
  export function QuickActions({ title, description, className, children }: QuickActionsProps) {
    return (
      <SectionCard
        data-slot="quick-actions"
        title={title ?? 'Quick Actions'}
        description={description}
        contentClassName="flex flex-col gap-2"
        className={className}
      >
        {children}
      </SectionCard>
    )
  }
  
  export interface QuickActionItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
    label: string
    icon?: LucideIcon
  }
  
  /** One shortcut row. Needs no router adapter: paste your own Link element in
   *  place of the anchor when you need SPA routing — you own this file. */
  export function QuickActionItem({ label, icon: Icon, className, ...rest }: QuickActionItemProps) {
    return (
      <a
        {...rest}
        className={`hover:border-border hover:bg-muted/50 group flex cursor-pointer items-center gap-3 rounded-lg border border-transparent p-3 transition-colors duration-200 ${className ?? ''}`}
      >
        {Icon && <IconBox icon={Icon} />}
        <span className="flex-1 text-sm font-medium">{label}</span>
        <ArrowUpRight className="text-muted-foreground size-4 opacity-0 transition-colors duration-200 group-hover:opacity-100" />
      </a>
    )
  }
  

Raw manifest:https://uipkge.dev/r/react/quick-actions.json