Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 1x 1x 2x 2x 1x 1x 4x 1x 1x 1x 1x 2x 8x | 'use client';
import { useEffect, useState } from 'react';
const SHADOWS = ['--shadow-1', '--shadow-2', '--shadow-3', '--shadow-4'] as const;
/**
* The --shadow-* tokens with their live computed values. Re-reads when
* ThemeProvider switches `data-theme` on <html>, so the printed value always
* matches the active theme.
*/
export function ShadowSwatches() {
const [values, setValues] = useState<Record<string, string>>({});
useEffect(() => {
const read = () => {
const cs = getComputedStyle(document.documentElement);
setValues(Object.fromEntries(SHADOWS.map((name) => [name, cs.getPropertyValue(name).trim()])));
};
read();
const observer = new MutationObserver(read);
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
return () => observer.disconnect();
}, []);
return (
<div className="style-preview__shadows">
{SHADOWS.map((name) => (
<div key={name} className="style-preview__shadow">
<div className="style-preview__shadow-box" style={{ boxShadow: `var(${name})` }} />
<div className="style-preview__shadow-text">
<code className="style-preview__shadow-name">{name}</code>
{/* Not a <pre>: CodeBlockHydrator would wrap it in code-block chrome. */}
<code className="style-preview__shadow-value">{values[name] || '…'}</code>
</div>
</div>
))}
</div>
);
}
|