Minor style changes

src/components/Divider.tsx

@@ -1,16 +1,53 @@
 import type { Children } from "@utils/types/props";
+import { cx } from "class-variance-authority";
 
-const Divider: React.FC<Children> = ({ children }) => {
+interface Props {
+  className?: string;
+  containerClassName?: string;
+  barsClassName?: string;
+}
+
+export const Divider: React.FC<Children & Props> = ({
+  children,
+  className,
+  containerClassName,
+  barsClassName,
+}) => {
   if (children === undefined)
-    return <div className="container my-24 h-1.5 border-y-2 border-y-fg/10" />;
+    return (
+      <div
+        className={cx(
+          "h-1.5 border-y-2 border-y-fg/10",
+          className,
+          containerClassName,
+          barsClassName
+        )}
+      />
+    );
 
   return (
-    <div className="flex w-full flex-row items-center gap-x-2">
-      <div className="h-1.5 flex-grow border-y-2 border-y-fg/10" />
+    <div
+      className={cx(
+        "flex w-full flex-row items-center gap-x-2",
+        className,
+        containerClassName
+      )}
+    >
+      <div
+        className={cx(
+          "h-1.5 flex-grow border-y-2 border-y-fg/10",
+          className,
+          barsClassName
+        )}
+      />
       {children}
-      <div className="h-1.5 flex-grow border-y-2 border-y-fg/10" />
+      <div
+        className={cx(
+          "h-1.5 flex-grow border-y-2 border-y-fg/10",
+          className,
+          barsClassName
+        )}
+      />
     </div>
   );
 };
-
-export default Divider;

src/components/SidePanel.tsx

@@ -31,7 +31,7 @@ export const SidePanel: React.FC = () => {
   return (
     <div
       id="side-panel"
-      className="fixed top-0 left-0 hidden h-full bg-bg-600 shadow md:block"
+      className="fixed top-0 left-0 hidden h-full w-64 bg-bg-600 md:block"
     >
       <header className="mx-12 my-8 flex flex-col">
         <h1>

src/pages/index.tsx

@@ -5,21 +5,23 @@ import type {
 } from "next";
 import Image from "next/image";
 import { Button } from "@components/Button";
-import Divider from "@components/Divider";
+import { Divider } from "@components/Divider";
 import { getServerAuthSession } from "@server/auth";
 import { signIn } from "next-auth/react";
 import { HomeLayout } from "@components/layouts";
 import { typo } from "@styles/typography";
 
 const Home: NextPage = () => {
+  const SpacedDivider = () => <Divider className="container my-24" />;
+
   return (
     <HomeLayout>
       <Hero />
-      <Divider />
+      <SpacedDivider />
       <About />
-      <Divider />
+      <SpacedDivider />
       <Premium />
-      <Divider />
+      <SpacedDivider />
       <CTA />
     </HomeLayout>
   );