import type { ReactNode } from "react";
import Link from "@moduletrace/twui/layout/Link";
import Row from "@moduletrace/twui/layout/Row";
import Span from "@moduletrace/twui/layout/Span";
import Stack from "@moduletrace/twui/layout/Stack";
type Props = {
avatar: ReactNode;
title: string;
/**
* Where the title links, for rows that open a page.
*/
href?: string;
/**
* A word beside the title, e.g. "Default" or "You".
*/
badge?: string;
subtitle?: string;
/**
* Its actions, at the end of the row.
*/
children?: ReactNode;
};
/**
* One row of a settings list: an avatar, a title and one line about it,
* then what can be done with it.
*/
export default function SettingsListRow({ avatar, title, href, badge, subtitle, children }: Props) {
const title_content = (
{title}
{badge ? {badge} : null}
);
return (
{avatar}
{href ? (
{title_content}
) : (
title_content
)}
{subtitle ? (
{subtitle}
) : null}
{children ? {children} : null}
);
}