70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import * as React from 'react';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Card from '@mui/material/Card';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import Radio from '@mui/material/Radio';
|
|
import RadioGroup from '@mui/material/RadioGroup';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Gear as GearIcon } from '@phosphor-icons/react/dist/ssr/Gear';
|
|
import { Moon as MoonIcon } from '@phosphor-icons/react/dist/ssr/Moon';
|
|
import { Sun as SunIcon } from '@phosphor-icons/react/dist/ssr/Sun';
|
|
|
|
export function ThemeSwitch(): React.JSX.Element {
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
avatar={
|
|
<Avatar>
|
|
<GearIcon fontSize="var(--Icon-fontSize)" />
|
|
</Avatar>
|
|
}
|
|
title="Theme options"
|
|
/>
|
|
<CardContent>
|
|
<Card variant="outlined">
|
|
<RadioGroup
|
|
defaultValue="light"
|
|
sx={{
|
|
gap: 0,
|
|
'& .MuiFormControlLabel-root': {
|
|
justifyContent: 'space-between',
|
|
p: '8px 12px',
|
|
'&:not(:last-of-type)': { borderBottom: '1px solid var(--mui-palette-divider)' },
|
|
},
|
|
}}
|
|
>
|
|
{[
|
|
{ title: 'Light mode', description: 'Best for bright environments', value: 'light', icon: SunIcon },
|
|
{ title: 'Dark mode', description: 'Recommended for dark rooms', value: 'dark', icon: MoonIcon },
|
|
{ title: 'System', description: "Adapts to your device's theme", value: 'system', icon: SunIcon },
|
|
].map((option) => (
|
|
<FormControlLabel
|
|
control={<Radio />}
|
|
key={option.value}
|
|
label={
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
<Avatar>
|
|
<option.icon fontSize="var(--Icon-fontSize)" />
|
|
</Avatar>
|
|
<div>
|
|
<Typography variant="inherit">{option.title}</Typography>
|
|
<Typography color="text.secondary" variant="caption">
|
|
{option.description}
|
|
</Typography>
|
|
</div>
|
|
</Stack>
|
|
}
|
|
labelPlacement="start"
|
|
value={option.value}
|
|
/>
|
|
))}
|
|
</RadioGroup>
|
|
</Card>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|