-
-
- Edit src/App.tsx and save to test HMR
-
+
+
-
- Click on the Vite and React logos to learn more
-
)
}
diff --git a/src/Pages/Home.tsx b/src/Pages/Home.tsx
new file mode 100644
index 0000000..42c930c
--- /dev/null
+++ b/src/Pages/Home.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Navbar from "../components/Navbar";
+import MainContainer from "../components/Home/MainContainer";
+import SignupBanner from "../components/SignupBanner";
+
+export default function Home(): React.JSX.Element {
+ return (
+ <>
+
+
+
+
+
+
+ )
+}
diff --git a/src/Pages/NotFound.tsx b/src/Pages/NotFound.tsx
new file mode 100644
index 0000000..83dd5a8
--- /dev/null
+++ b/src/Pages/NotFound.tsx
@@ -0,0 +1,8 @@
+
+export default function NotFound(){
+ return (
+
+ Not Found
+
+ )
+}
diff --git a/src/Pages/Search.tsx b/src/Pages/Search.tsx
new file mode 100644
index 0000000..425ce32
--- /dev/null
+++ b/src/Pages/Search.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Navbar from "../components/Navbar";
+import MainContainer from "../components/Search/MainContainer";
+import SignupBanner from "../components/SignupBanner";
+
+export default function Search():React.JSX.Element {
+ return (
+ <>
+
+
+
+
+
+
+ )
+}
diff --git a/src/Router/router.tsx b/src/Router/router.tsx
new file mode 100644
index 0000000..50ce7fd
--- /dev/null
+++ b/src/Router/router.tsx
@@ -0,0 +1,22 @@
+import { createBrowserRouter } from "react-router-dom";
+import Home from "../Pages/Home";
+import NotFound from "../Pages/NotFound";
+import Search from "../Pages/Search";
+
+const router = createBrowserRouter([
+ {
+ path:"/",
+ element:
+ },
+ {
+ path:"/search",
+ element:
,
+ },
+ {
+ path:"*",
+ element :
+ },
+
+])
+
+export default router;
diff --git a/src/components/Home/HomeNav.tsx b/src/components/Home/HomeNav.tsx
new file mode 100644
index 0000000..a242dc9
--- /dev/null
+++ b/src/components/Home/HomeNav.tsx
@@ -0,0 +1,17 @@
+
+export default function HomeNav() {
+ return (
+
+
+
+
+
+
+
Premium Support Download
+
+
+
+
+
+ )
+}
diff --git a/src/components/Home/MainContainer.tsx b/src/components/Home/MainContainer.tsx
new file mode 100644
index 0000000..6441df4
--- /dev/null
+++ b/src/components/Home/MainContainer.tsx
@@ -0,0 +1,11 @@
+import HomeNav from "./HomeNav"
+import SuggestionsPlaylistCard from "./SuggestionsPlaylist"
+
+export default function MainContainer() {
+ return (
+
+
+
+
+ )
+}
diff --git a/src/components/Home/SuggestionCard.tsx b/src/components/Home/SuggestionCard.tsx
new file mode 100644
index 0000000..f2beff2
--- /dev/null
+++ b/src/components/Home/SuggestionCard.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+type SuggestionCardProps = {
+ title : string,
+ description : string
+ imageUrl : string,
+}
+
+export default function SuggestionCard({title, description, imageUrl}: SuggestionCardProps) : React.JSX.Element {
+ return (
+
+
+
+
+
+
+
{title}
+
{description}
+
+
+ )
+}
+
diff --git a/src/components/Home/SuggestionsPlaylist.tsx b/src/components/Home/SuggestionsPlaylist.tsx
new file mode 100644
index 0000000..203b59c
--- /dev/null
+++ b/src/components/Home/SuggestionsPlaylist.tsx
@@ -0,0 +1,28 @@
+import SuggestionCard from "./SuggestionCard"
+import dataJSON from "../../../data.json";
+
+export default function SuggestionsPlaylistCard(){
+ return (
+
+
+
Zzzzz
+
+ {dataJSON['SpotifyPlaylists'].map((data, idx)=> {
+ return
+ })
+ }
+
+
+
+
Sleep
+
+ {dataJSON['Sleep'].map((data, idx)=> {
+ return
+ })
+ }
+
+
+
+
+ )
+}
diff --git a/src/components/NavLibraryComponent.tsx b/src/components/NavLibraryComponent.tsx
new file mode 100644
index 0000000..0054ecf
--- /dev/null
+++ b/src/components/NavLibraryComponent.tsx
@@ -0,0 +1,28 @@
+import React from "react" ;
+import PlaylistComponent from "./PlaylistComponent";
+import PodcastComponent from "./PodcastComponent";
+
+export default function NavLibraryComponent(): React.JSX.Element {
+ return (
+
+
+
+
+
+
Your Library
+
+
+
+
+
+
+
Cookies
+
+
+
+
+ )
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..6a25eec
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+
+import NavigationComponent from "./NavigationComponent"
+import NavLibraryComponent from "./NavLibraryComponent"
+
+export default function Navbar(): React.JSX.Element {
+ return (
+
+ )
+}
diff --git a/src/components/NavigationComponent.tsx b/src/components/NavigationComponent.tsx
new file mode 100644
index 0000000..bc623cf
--- /dev/null
+++ b/src/components/NavigationComponent.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import { Link } from "react-router-dom"
+
+export default function NavigationComponent():React.JSX.Element {
+ return (
+
+
+
+
+
Home
+
+
+
+
Search
+
+
+ )
+}
diff --git a/src/components/PlaylistComponent.tsx b/src/components/PlaylistComponent.tsx
new file mode 100644
index 0000000..47f2238
--- /dev/null
+++ b/src/components/PlaylistComponent.tsx
@@ -0,0 +1,10 @@
+
+export default function PlaylistComponent() {
+ return (
+
+ Create your first playlist
+ It's easy we will help you
+
+
+ )
+}
diff --git a/src/components/PodcastComponent.tsx b/src/components/PodcastComponent.tsx
new file mode 100644
index 0000000..cd9f3ac
--- /dev/null
+++ b/src/components/PodcastComponent.tsx
@@ -0,0 +1,9 @@
+export default function PodcastComponent() {
+ return (
+
+ Let's find some podcasts to follow
+ We will keep you updated on new episodes
+
+
+ )
+}
diff --git a/src/components/Search/CategoriesContainer.tsx b/src/components/Search/CategoriesContainer.tsx
new file mode 100644
index 0000000..ac24e8f
--- /dev/null
+++ b/src/components/Search/CategoriesContainer.tsx
@@ -0,0 +1,39 @@
+import dataJSON from "../../../data.json";
+
+const filters = ["All", "Songs", "Artists", "Playlists", "Albums", "Podcasts & Shows"]
+
+export default function CategoriesContainer() {
+
+ return (
+
+
+ {
+ filters.map((filter, idx) => {
+ return (
+
+ {filter}
+
+ )
+ })
+ }
+
+
+
+ Browse All
+
+
+ {
+ dataJSON['Categories'].map((data, idx)=>{
+ return (
+
+
{data.title}
+
+
+ )
+ })
+ }
+
+
+
+ )
+}
diff --git a/src/components/Search/MainContainer.tsx b/src/components/Search/MainContainer.tsx
new file mode 100644
index 0000000..e915f78
--- /dev/null
+++ b/src/components/Search/MainContainer.tsx
@@ -0,0 +1,11 @@
+import SearchNav from "./SearchNav"
+import CategoriesContainer from "./CategoriesContainer"
+
+export default function MainContainer() {
+ return (
+
+
+
+
+ )
+}
diff --git a/src/components/Search/SearchNav.tsx b/src/components/Search/SearchNav.tsx
new file mode 100644
index 0000000..930e78f
--- /dev/null
+++ b/src/components/Search/SearchNav.tsx
@@ -0,0 +1,21 @@
+
+export default function SearchNav() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
Premium Support Download
+
+
+
+
+
+ )
+}
diff --git a/src/components/SignupBanner.tsx b/src/components/SignupBanner.tsx
new file mode 100644
index 0000000..7858927
--- /dev/null
+++ b/src/components/SignupBanner.tsx
@@ -0,0 +1,12 @@
+
+export default function SignupBanner() {
+ return (
+
+
+ Preview of Spotify
+ Sign up to get unlimited songs and podcasts with occasional ads. No credit card needed.
+
+
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 6119ad9..5eb9cee 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +1,27 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
+:root {
+ --background-dark: #000;
+ --background-light-dark: #121212;
+ --background-light : #242424;
+ --text-white: #FFFFFF;
}
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+body {
+ background-color: var(--background-dark);
+ color : var(--text-white);
}
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
+.bg-dark {
+ background-color: var(--background-dark);
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+.bg-light-dark {
+ background-color : var(--background-light-dark);
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+.bg-light-black {
+ background-color : var(--background-light);
}
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..c9a154f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import "./index.css" ;
+import { RouterProvider } from 'react-router-dom';
+import router from './Router/router.tsx';
ReactDOM.createRoot(document.getElementById('root')!).render(
-
+
,
)
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..bd47d06
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./src/**/*.{js,tsx,ts,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
diff --git a/vite.config.ts b/vite.config.ts
index 5a33944..967bcae 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,6 @@ import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig({
plugins: [react()],
})