mirror of https://github.com/kern/filepizza
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import React, { JSX } from 'react'
|
|
|
|
export default function InputLabel({
|
|
children,
|
|
hasError = false,
|
|
tooltip,
|
|
}: {
|
|
children: React.ReactNode
|
|
hasError?: boolean
|
|
tooltip?: string
|
|
}): JSX.Element {
|
|
return (
|
|
<div className="relative flex items-center gap-1">
|
|
<label
|
|
className={`text-[10px] mb-0.5 font-bold group relative inline-block ${
|
|
hasError ? 'text-red-500' : 'text-stone-400'
|
|
}`}
|
|
>
|
|
{children}
|
|
</label>
|
|
{tooltip && (
|
|
<div className="relative">
|
|
<div
|
|
className="text-[11px] text-stone-400 dark:text-stone-400 cursor-help hover:opacity-80 peer focus:opacity-80"
|
|
role="button"
|
|
aria-label="Show tooltip"
|
|
tabIndex={0}
|
|
>
|
|
ⓘ
|
|
</div>
|
|
<div className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-1 opacity-0 peer-hover:opacity-100 peer-focus:opacity-100 transition-opacity duration-200 z-10">
|
|
<div className="bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 text-xs rounded px-3 py-2 w-[320px] border border-stone-200 dark:border-stone-700 shadow-lg">
|
|
{tooltip}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|