1 files changed, 37 insertions, 0 deletions
diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx
new file mode 100644
index 0000000..4a7ee54
--- /dev/null
+++ b/src/components/Frame.tsx
@@ -0,0 +1,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;