29 lines
660 B
TypeScript
29 lines
660 B
TypeScript
import { HTMLProps, ReactNode, useCallback } from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
import { useStorage } from '@libs/storage/provider';
|
|
|
|
export function Frame({
|
|
children,
|
|
className,
|
|
lighter,
|
|
}: {
|
|
children: ReactNode;
|
|
className: HTMLProps<HTMLElement>['className'];
|
|
lighter?: boolean;
|
|
}) {
|
|
const { db } = useStorage();
|
|
|
|
const platformStyles = useCallback(() => {
|
|
switch (db.platform) {
|
|
case 'darwin':
|
|
if (lighter) return 'bg-black/80';
|
|
return 'bg-black/90';
|
|
default:
|
|
return 'bg-black';
|
|
}
|
|
}, []);
|
|
|
|
return <div className={twMerge(className, platformStyles())}>{children}</div>;
|
|
}
|