mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-21 06:26:26 +00:00
Maurice
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import ToggleSwitch from '../Settings/ToggleSwitch'
|
|
import { fs } from '../shared/DialogShell'
|
|
|
|
/**
|
|
* One child row inside an {@link AddonTile}'s sub-shelf: bag tracking under
|
|
* Lists, a collab feature under Collab, a photo provider under Journey.
|
|
*
|
|
* A photo provider without a vendor mark has to stay free of `<svg>`
|
|
* (FE-ADMIN-ADDON-015), which is why `icon` falls back to a fixed-width spacer
|
|
* rather than a placeholder glyph. Nothing else belongs in this row either: no
|
|
* chevron, no status dot, no lucide fallback.
|
|
*
|
|
* The row carries its title only; the description rides along as the `title`
|
|
* tooltip, because a second line of text is what makes a child weigh as much as
|
|
* an addon.
|
|
*/
|
|
export default function AddonSubRow({
|
|
icon,
|
|
title,
|
|
description,
|
|
enabled,
|
|
onToggle,
|
|
}: {
|
|
/** Vendor mark or lucide glyph at 14px. Omit it and the slot keeps its width. */
|
|
icon?: ReactNode
|
|
title: string
|
|
description?: string
|
|
enabled: boolean
|
|
onToggle: () => void
|
|
}) {
|
|
return (
|
|
<li className="flex min-h-[44px] items-center gap-2.5 px-3 py-1.5">
|
|
{icon
|
|
? <span className={`grid h-6 w-6 flex-none place-items-center ${enabled ? 'text-content-muted' : 'text-content-faint'}`}>{icon}</span>
|
|
: <span className="w-6 flex-none" aria-hidden />}
|
|
<span className={`min-w-0 flex-1 truncate font-medium ${enabled ? 'text-content' : 'text-content-muted'}`} style={fs(12.5, 'body')} title={description}>
|
|
{title}
|
|
</span>
|
|
<ToggleSwitch on={enabled} onToggle={onToggle} label={title} />
|
|
</li>
|
|
)
|
|
}
|