pastilhas
2ec3f11cdd
These are the strings a user meets everywhere, mostly sr-only: the dialog and
sheet close buttons, pagination labels, carousel arrows, the breadcrumb ellipsis
and both colour-mode toggles. nav aria-label='pagination' became a real key too —
a screen reader announces it, so it is user-facing.
Logo alt text keeps the product name and translates only around it
('Logótipo Officer'). Arrow-button insets became logical (-start-12/-end-12).
The three 'useX must be used within <Y>' Errors are deliberately untouched:
never-translate, per the doc's list.
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { Moon, Sun } from 'lucide-react';
|
|
import { cn } from 'helpers/cn';
|
|
import { useColorMode } from './ThemeProvider';
|
|
import { useTranslation } from '@/components/locales';
|
|
|
|
type ThemeToggleProps = { colorDark?: boolean; colorLight?: boolean };
|
|
|
|
export const ThemeToggle = (props: ThemeToggleProps) => {
|
|
const { colorDark, colorLight } = props;
|
|
const { colorMode, setColorMode } = useColorMode();
|
|
const { t } = useTranslation();
|
|
|
|
const toggle = () => {
|
|
setColorMode(colorMode === 'dark' ? 'light' : 'dark');
|
|
};
|
|
|
|
return (
|
|
<div className="cursor-pointer" onClick={toggle}>
|
|
<Sun
|
|
className={cn(
|
|
'h-[1.2rem] w-[1.2rem] origin-center rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0',
|
|
colorLight && 'text-white',
|
|
)}
|
|
/>
|
|
<Moon
|
|
className={cn(
|
|
'absolute -mt-[1.2rem] h-[1.2rem] w-[1.2rem] origin-center rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100',
|
|
colorDark && 'text-black',
|
|
)}
|
|
/>
|
|
<span className="sr-only">{t('theme.toggle')}</span>
|
|
</div>
|
|
);
|
|
};
|