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
50
51
52
53
54
55
56
57
58
59
60
|
import React, { ReactElement } from "react";
import Button from "./Button";
import classNames from "classnames";
import CodeBlock from "@theme/CodeBlock";
type FrameType = {
children?: string;
language?: string;
title?: string;
rainbow?: boolean;
shadowClass?: 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 = ["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,
language,
title,
width,
shadowClass = "shadow-neoblack",
}: FrameType) => {
const s = rainbow
? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow")
: classes;
const cls = [...s, `${widthClasses[width]}`, shadowClass].join(" ");
return (
<div className={cls}>
<CodeBlock
className="!rounded-none h-full"
language={language}
title={title}
>
{children}
</CodeBlock>
</div>
);
};
export default Frame;
|
