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