2

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+password.txt
+
 # dependencies
 /node_modules
 /.pnp

app/(site)/page.tsx

@@ -1,7 +1,53 @@
-
+import Header from "@/components/Header"
+import ListItem from "@/components/ListItem"
 
 export default function Home() {
   return (
-    <div className="text-green-500">Main Content</div>
+    <div className="
+    bg-neutral-900
+      rounded-lg
+      h-full
+      w-full
+      overflow-hidden
+      overflow-y-auto
+      ">
+        <Header>
+          <div className="mb-2">
+            <h1 
+            className="
+            text-white
+            text-3xl
+            font-semibold
+            ">
+              Welcome back
+            </h1>
+            <div 
+            className="
+            grid
+            grid-cols-2
+            sm:grid-cols-3
+            xl:grid-cols-4
+            gap-3
+            mt-4
+            ">
+              <ListItem 
+              image="/images/liked.png"
+              name="Liked Songs"
+              href="liked"
+              />
+            </div>
+          </div>
+        </Header>
+        <div className="mt-2 mb-7 px-6">
+          <div className="flex justify-between items-center">
+            <h1 className="text-white text-2xl font-semibold">
+              New songs
+            </h1>
+          </div>
+            <div>
+              List of songs
+            </div>
+        </div>
+    </div>
   );
 }

components/Button.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from "react";
+import { twMerge } from "tailwind-merge"
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>{}
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
+    className,
+    children,
+    disabled,
+    type = "button",
+    ...props
+}, ref) => {
+    return (
+        <button
+            type={type}
+            className={twMerge(`
+                w-full
+                rounded-full
+                bg-gray-500
+                border
+                border-transparent
+                px-3
+                py-3
+                disabled:curos-not-allowed
+                disabled:opacity-50
+                text-black
+                font-bold
+                hover:opacity-75
+                transition
+                `,
+            className
+        )}
+        disabled={disabled}
+        ref={ref}
+        {...props}
+                >
+                 {children}
+        </button>
+    )
+})
+
+Button.displayName = "Button"
+export default Button;

components/Header.tsx

@@ -0,0 +1,143 @@
+"use client"
+import { useRouter } from "next/navigation"
+import { twMerge } from "tailwind-merge"
+import { RxCaretLeft, RxCaretRight } from "react-icons/rx"
+import { HiHome } from "react-icons/hi";
+import { BiSearch } from "react-icons/bi";
+import Button from "./Button"
+interface HeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+   const Header: React.FC<HeaderProps> = ({
+    children,
+    className
+   }) => {
+    const router = useRouter();
+
+    const handleLogout = () => {
+        //handle logout
+    }
+    return ( 
+        <div
+        className={twMerge(`
+            h-fit
+            bg-gradient-to-b
+            from-gray-800
+            p-6
+        `,
+        className
+        )}
+        >
+          <div className="
+          w-full
+          mb-4
+          flex
+          items-center
+          justify-between
+          ">
+            <div className="
+            hidden
+            md:flex
+            gap-x-2
+            items-center
+            ">
+                <button
+                onClick={() => router.back()}
+                className="
+                rounded-full
+                bg-black
+                flex
+                items-center
+                justify-center
+                hover:opacity-75
+                transition
+                "
+                >
+                    <RxCaretLeft className="text-white" size={35}/>
+                </button>
+                <button
+                onClick={() => router.forward()}
+                className="
+                rounded-full
+                bg-black
+                flex
+                items-center
+                justify-center
+                hover:opacity-75
+                transition
+                "
+                >
+                    <RxCaretRight className="text-white" size={35}/>
+                </button>
+            </div>
+            <div className="flex md:hidden gap-x-2 items-center">
+                <button
+                className="
+                rounded-full
+                p-2
+                bg-white
+                flex
+                items-center
+                hover:opacity-75
+                transition
+                ">
+                    <HiHome className="text-black" size={20}/>
+                </button>
+                <button
+                className="
+                rounded-full
+                p-2
+                bg-white
+                flex
+                items-center
+                hover:opacity-75
+                transition
+                ">
+                    <BiSearch className="text-black" size={20}/>
+                </button>
+            </div>
+            <div
+                className="
+                flex
+                justify-between
+                items-center
+                gap-x-4
+                "
+            >
+                <>
+                    <div>
+                        <Button
+                            onClick={() => {}}
+                            className="
+                            bg-transparent
+                            text-neutral-300
+                            font-medium
+                            "
+                        >
+                           Sign up 
+                        </Button>
+                    </div>
+                    <div>
+                        <Button
+                            onClick={() => {}}
+                            className="
+                            bg-transparent
+                            text-neutral-300
+                            font-medium
+                            "
+                        >
+                           Log in
+                        </Button>
+                    </div>
+
+                </>
+            </div>
+
+          </div>
+          {children}
+        </div>
+     );
+}
+
+export default Header;

components/ListItem.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+import { FaPlay } from "react-icons/fa"
+interface ListItemProps {
+    image: string;
+    name: string;
+    href: string;
+}
+
+const ListItem: React.FC<ListItemProps> = ({
+    image,
+    name,
+    href
+}) => {
+    const router = useRouter();
+
+    const onClick = () => {
+        //add authentication before push
+        router.push(href)
+    }
+    return (
+       <button
+       onClick={onClick}
+       className="
+       relative
+       group
+       flex
+       items-center
+       rounded-md
+       overflow-hidden
+       gap-x-4
+       bg-neutral-100/10
+       hover:bg-neutral-100/20
+       transition
+       pr-4
+       "
+       >
+            <div className="
+            relative
+           
+            ">
+            <Image 
+            className="object-cover"
+            fill
+            src={image}
+            alt="Image"
+            /> 
+            </div>
+            <p className="font-medium truncate py-5">
+                {name}
+            </p>
+            <div
+            className="
+            absolute
+            transition
+            opacity-0
+            rounded-full
+            flex
+            items-center
+            justify-center
+            bg-gray-500
+            p-4
+            drop-shadow-md
+            right-5
+            group-hover:opacity-100
+            hover:scale-110
+            ">
+                <FaPlay className="text-black" />
+            </div>
+       </button>
+      );
+}
+
+export default ListItem