2 files changed, 41 insertions, 4 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 7dc64fd..8d2d6db 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import React from "react";
 
 type ButtonType = {
-  buttonText: string;
+  children?: React.ReactNode;
   rounded?: "none" | "md" | "full";
   size?: "sm" | "md" | "lg";
   color?:
@@ -18,7 +18,7 @@ type ButtonType = {
 };
 
 const Button = ({
-  buttonText = "Enabled",
+  children,
   rounded = "none",
   size = "md",
   color = "cyan",
@@ -27,7 +27,7 @@ const Button = ({
   return (
     <button
       className={classNames(
-        "border-black border-2",
+        "border-black border-2 text-black",
 
         {
           "bg-violet-200 hover:bg-violet-300 active:bg-violet-400":
@@ -70,7 +70,7 @@ const Button = ({
       )}
       disabled={disabled}
     >
-      {buttonText}
+      {children}
     </button>
   );
 };
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;