49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
import { cn } from "./cn.js";
|
|
|
|
export interface SettingsCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
eyebrow?: ReactNode;
|
|
title: ReactNode;
|
|
description?: ReactNode;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function SettingsCard({ eyebrow, title, description, actions, children, className, ...props }: SettingsCardProps) {
|
|
return (
|
|
<section className={cn("nodedc-settings-card", className)} {...props}>
|
|
<header className="nodedc-settings-card__head">
|
|
<div className="nodedc-settings-card__titles">
|
|
{eyebrow ? <span>{eyebrow}</span> : null}
|
|
<h2>{title}</h2>
|
|
{description ? <p>{description}</p> : null}
|
|
</div>
|
|
{actions ? <div className="nodedc-settings-card__actions">{actions}</div> : null}
|
|
</header>
|
|
<div className="nodedc-settings-card__body">{children}</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export interface SwitchProps {
|
|
checked: boolean;
|
|
label: string;
|
|
disabled?: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
}
|
|
|
|
export function Switch({ checked, label, disabled = false, onChange }: SwitchProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="nodedc-switch"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
onClick={() => onChange(!checked)}
|
|
>
|
|
<span className="nodedc-switch__track" aria-hidden="true"><span /></span>
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
}
|