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
|
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", "flex", "flex-row", "items-center"];
const lightModeClasses = ["bg-codeBg", "text-black", "border-black"];
const classes = [...dimensionClasses, ...lightModeClasses];
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 !mb-0 "
language={language}
showLineNumbers
title={title}
>
{children}
</CodeBlock>
</div>
);
};
export default Frame;
|
