13 lines
832 B
TypeScript
13 lines
832 B
TypeScript
|
export function SideNote({ children, title }: { children: React.ReactNode; title?: string }) {
|
||
|
|
return (
|
||
|
|
<aside className="my-6 p-4 bg-zinc-50 dark:bg-zinc-900/50 border-l-2 border-zinc-300 dark:border-zinc-700 text-sm text-zinc-600 dark:text-zinc-400 font-light italic rounded-r-lg lg:absolute lg:right-0 lg:w-64 lg:mr-[-20rem] lg:my-0 lg:p-0 lg:bg-transparent lg:dark:bg-transparent lg:border-0 lg:not-italic lg:rounded-none">
|
||
|
|
{/* Mobile/Tablet view: distinct block */}
|
||
|
|
{/* Desktop view: Absolute positioning to the right margin */}
|
||
|
|
<span className="lg:block lg:text-xs lg:leading-relaxed">
|
||
|
|
{title && <strong className="block mb-1 text-zinc-900 dark:text-zinc-200 not-italic">{title}</strong>}
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|