Merge pull request #4 from isd-sgcu/feat/shared-border-frame

feat: shared border frame

src/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
-import Image from 'next/image';
 
 const inter = Inter({ subsets: ['latin'] });
 

src/app/page.tsx

@@ -1,3 +1,13 @@
+import Border from '@/components/Border';
+
 export default function Home() {
-  return <main className="w-full">home</main>;
+  return (
+    <main className="w-full flex justify-center items-center flex-col p-10">
+      <Border variant="dark-pink">
+        <h1 className="text-4xl font-bold text-center text-white">
+          Hello, World!
+        </h1>
+      </Border>
+    </main>
+  );
 }

src/components/Border.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import darkPinkBorder from '../../public/border/darkPinkBorder.webp';
+import lightPinkBorder from '../../public/border/lightPinkBorder.webp';
+import whiteBrownBorder from '../../public/border/whiteBrownBorder.webp';
+import transparentBorder from '../../public/border/transparentBorder.webp';
+
+interface BorderProps {
+  variant: 'dark-pink' | 'light-pink' | 'white-brown' | 'transparent';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const borderStyles = {
+  'dark-pink': {
+    base: 'bg-cover bg-center',
+    style: {
+      backgroundImage: `url(${darkPinkBorder.src})`,
+    },
+  },
+  'light-pink': {
+    base: 'bg-cover bg-center opacity-70',
+    style: {
+      backgroundImage: `url(${lightPinkBorder.src})`,
+    },
+  },
+  'white-brown': {
+    base: 'bg-cover bg-center',
+    style: {
+      backgroundImage: `url(${whiteBrownBorder.src})`,
+    },
+  },
+  transparent: {
+    base: 'bg-cover bg-center opacity-70',
+    style: {
+      backgroundImage: `url(${transparentBorder.src})`,
+    },
+  },
+};
+
+const Border: React.FC<BorderProps> = ({
+  variant = 'dark-pink',
+  className,
+  children,
+}) => {
+  const { base, style } = borderStyles[variant];
+
+  return (
+    <div
+      className={`flex pt-24 p-10 items-center flex-col w-[360px] h-[799px]  ${base} ${className}`}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Border;