mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import ToggleSwitch from '../Settings/ToggleSwitch'
|
|
import { fs } from '../shared/DialogShell'
|
|
|
|
/**
|
|
* One addon in its type's card: a row like the bag sidebar's (#2541), with the
|
|
* icon tile on the left, name and description beside it and the switch on the
|
|
* right. Its sub-features sit under it in a grey inset box of hairline rows.
|
|
*
|
|
* The on/off state rides on the icon tile and the switch: a switched-off addon
|
|
* greys its tile and its description, but keeps its name at full strength. The
|
|
* name is the tile's identity, not its state; greying it out reads as "broken"
|
|
* rather than "not enabled".
|
|
*
|
|
* The row is not a click target, only the switches are. No lift, no pointer
|
|
* cursor, no `role="button"`.
|
|
*/
|
|
export default function AddonTile({
|
|
icon,
|
|
name,
|
|
description,
|
|
enabled,
|
|
onToggle,
|
|
children,
|
|
}: {
|
|
icon: ReactNode
|
|
name: string
|
|
description?: string
|
|
enabled: boolean
|
|
onToggle: () => void
|
|
/** The sub-shelf: `<AddonSubRow>` children. */
|
|
children?: ReactNode
|
|
}) {
|
|
return (
|
|
<article className="px-3.5 py-3 transition-colors duration-150 focus-within:bg-surface-secondary">
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
// overflow-hidden so a brand mark that fills the slot keeps the slot's
|
|
// rounded corners instead of squaring them off.
|
|
className={`grid h-9 w-9 flex-none place-items-center overflow-hidden rounded-[10px] transition-colors ${
|
|
enabled ? 'bg-surface-card text-content shadow-sm ring-1 ring-edge-faint' : 'bg-surface-tertiary text-content-faint'
|
|
}`}
|
|
>
|
|
{icon}
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1 pt-px">
|
|
<h4 className="m-0 truncate font-semibold text-content" style={fs(13, 'body')} title={name}>
|
|
{name}
|
|
</h4>
|
|
<p
|
|
className={`m-0 mt-0.5 line-clamp-2 leading-snug ${enabled ? 'text-content-muted' : 'text-content-faint'}`}
|
|
style={fs(11.5)}
|
|
title={description}
|
|
>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex-none pt-1.5">
|
|
<ToggleSwitch on={enabled} onToggle={onToggle} label={name} />
|
|
</div>
|
|
</div>
|
|
|
|
{children && (
|
|
<div className="mt-3 overflow-hidden rounded-[12px] border border-edge-faint bg-surface-secondary">
|
|
{/* Sitting inside the parent on its own fill is enough to say these belong
|
|
to it: no rail, no indent guides. */}
|
|
<ul className="m-0 list-none divide-y divide-edge-faint p-0">{children}</ul>
|
|
</div>
|
|
)}
|
|
</article>
|
|
)
|
|
}
|