1 files changed, 16 insertions, 8 deletions
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>;
 };