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
|
import React, { ReactElement } from "react";
import Button from "./Button";
import classNames from "classnames";
type FrameType = {
children?: ReactElement | ReactElement[];
rainbow?: boolean;
width?: "fit" | "full" | "1/2" | "1/3";
};
const dimensionClasses = ["px-8", "py-4", "dark:bg-slate-950", "border-4"];
const lightModeClasses = [
"bg-white",
"text-black",
"border-black",
"shadow-neoblack",
];
const darkModeClasses = [
"bg-slate-950",
"text-white",
"border-white",
"shadow-neowhite",
].map((className) => `dark:${className}`);
const classes = [...dimensionClasses, ...lightModeClasses, ...darkModeClasses];
const Frame = ({ rainbow, children, width }: FrameType) => {
const s = rainbow
? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow")
: classes;
const cls = [...s, `w-${width}`].join(" ");
return <div className={cls}>{children}</div>;
};
export default Frame;
|
