mirror of https://github.com/gabehf/Koito.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
1.1 KiB
31 lines
1.1 KiB
import { Check } from "lucide-react"
|
|
import CheckCircleIcon from "./icons/CheckCircleIcon"
|
|
|
|
interface Props {
|
|
id: number
|
|
onClick: React.MouseEventHandler<HTMLButtonElement>
|
|
img: string
|
|
text: string
|
|
subtext?: string
|
|
active: boolean
|
|
}
|
|
|
|
export default function SearchResultSelectorItem(props: Props) {
|
|
return (
|
|
<button className="px-3 py-2 flex gap-3 items-center hover:text-(--color-fg-secondary) hover:cursor-pointer w-full" style={{ border: props.active ? "1px solid var(--color-fg-tertiary" : ''}} onClick={props.onClick}>
|
|
<img src={props.img} alt={props.text} />
|
|
<div className="flex justify-between items-center w-full">
|
|
<div className="flex flex-col items-start text-start">
|
|
{props.text}
|
|
{props.subtext ? <><br/>
|
|
<span className="color-fg-secondary">{props.subtext}</span>
|
|
</> : ''}
|
|
</div>
|
|
{
|
|
props.active ?
|
|
<div className="px-2"><Check size={24} /></div> : ''
|
|
}
|
|
</div>
|
|
</button>
|
|
)
|
|
} |