2 files changed, 76 insertions, 8 deletions
diff --git a/src/components/CodeFrame.tsx b/src/components/CodeFrame.tsx
new file mode 100644
index 0000000..957eb5b
--- /dev/null
+++ b/src/components/CodeFrame.tsx
@@ -0,0 +1,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;
diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx
index 4a7ee54..62467b6 100644
--- a/src/components/Frame.tsx
+++ b/src/components/Frame.tsx
@@ -5,17 +5,20 @@ import classNames from "classnames";
 type FrameType = {
   children?: ReactElement | ReactElement[];
   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 = ["px-8", "py-4", "dark:bg-slate-950", "border-4"];
 
-const lightModeClasses = [
-  "bg-white",
-  "text-black",
-  "border-black",
-  "shadow-neoblack",
-];
+const lightModeClasses = ["bg-white", "text-black", "border-black"];
 
 const darkModeClasses = [
   "bg-slate-950",
@@ -26,11 +29,16 @@ const darkModeClasses = [
 
 const classes = [...dimensionClasses, ...lightModeClasses, ...darkModeClasses];
 
-const Frame = ({ rainbow, children, width }: FrameType) => {
+const Frame = ({
+  rainbow,
+  children,
+  width,
+  shadowClass = "shadow-neoblack",
+}: FrameType) => {
   const s = rainbow
     ? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow")
     : classes;
-  const cls = [...s, `w-${width}`].join(" ");
+  const cls = [...s, `${widthClasses[width]}`, shadowClass].join(" ");
   return <div className={cls}>{children}</div>;
 };