alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import type { ReactNode } from 'react'
|
|
|
|
import { forwardRef } from 'react'
|
|
|
|
import Button from '@/components/formElements/Button'
|
|
import { cn } from '@/lib/cn'
|
|
|
|
interface ConsumerPickerTriggerProps {
|
|
'aria-label': string
|
|
children: ReactNode
|
|
className?: string
|
|
disabled?: boolean
|
|
icon?: ReactNode
|
|
onClick: () => void
|
|
}
|
|
|
|
/**
|
|
* Common consumer trigger for controls that open a selection modal.
|
|
* It deliberately only owns the visual affordance; the date, time, and map
|
|
* pickers remain responsible for their own value and modal state.
|
|
*/
|
|
const ConsumerPickerTrigger = forwardRef<HTMLButtonElement, ConsumerPickerTriggerProps>(
|
|
({ 'aria-label': ariaLabel, children, className, disabled, icon, onClick }, ref) => (
|
|
<Button
|
|
ref={ref}
|
|
fullWidth
|
|
aria-label={ariaLabel}
|
|
className={cn(
|
|
'consumer-focus-ring flex h-12 items-center justify-center gap-2 rounded-xl bg-[#E2E2E280] px-2 text-xs font-medium text-tertiary-900 transition-colors hover:bg-[#e2e2e2b3] disabled:cursor-not-allowed disabled:opacity-50',
|
|
className
|
|
)}
|
|
disabled={disabled}
|
|
variant="flat"
|
|
onClick={onClick}
|
|
>
|
|
{icon ? (
|
|
<span
|
|
aria-hidden
|
|
className="flex size-5 shrink-0 items-center justify-center [&>svg]:size-5"
|
|
>
|
|
{icon}
|
|
</span>
|
|
) : null}
|
|
<span className="min-w-0 truncate">{children}</span>
|
|
</Button>
|
|
)
|
|
)
|
|
|
|
ConsumerPickerTrigger.displayName = 'ConsumerPickerTrigger'
|
|
|
|
export default ConsumerPickerTrigger
|