Spotify Clone Assignment completed

package.json

@@ -10,18 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
+    "@types/node": "^20.11.19",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.0"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,35 +1,30 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes
+} from 'react-router-dom';
+import Home from './Pages/Home';
+import Searchpage from './Pages/Searchpage';
+
 
-function App() {
-  const [count, setCount] = useState(0)
 
+
+function App() {
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <div className="w-full h-full overflow-x-hidden bg-black">
+
+       <Router>
+        <Routes>
+          <Route path='/' element={<Home/>}/>
+          <Route path='/search' element={<Searchpage/>}/>
+
+
+        </Routes>
+       </Router>
+
+    </div>
   )
 }
 
-export default App
+export default App;
+

src/Assets/Icons/Homeicon.tsx

@@ -0,0 +1,16 @@
+
+import Icon from '../../Types/Icon'
+
+
+const Homeicon = () => {
+  return (
+    <Icon size={18}>
+    <svg width="24" height="26"  fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path d="M28.5,9.14l-12-7a1,1,0,0,0-1,0l-12,7A1,1,0,0,0,3,10V28a1,1,0,0,0,1,1h9a1,1,0,0,0,1-1V21h4v7a1,1,0,0,0,1,1h9a1,1,0,0,0,1-1V10A1,1,0,0,0,28.5,9.14ZM27,27H20V20a1,1,0,0,0-1-1H13a1,1,0,0,0-1,1v7H5V10.57L16,4.16l11,6.41Z" fill="white" fill-opacity="0.7"></path>
+    </svg>
+  </Icon>
+
+  )
+}
+
+export default Homeicon

src/Assets/Icons/Lefticon.tsx

@@ -0,0 +1,16 @@
+
+import Icon from '../../Types/Icon'
+
+const Lefticon = () => {
+  return (
+    <Icon>
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5999 12.71C10.5062 12.617 10.4318 12.5064 10.381 12.3846C10.3303 12.2627 10.3041 12.132 10.3041 12C10.3041 11.868 10.3303 11.7373 10.381 11.6154C10.4318 11.4936 10.5062 11.383 10.5999 11.29L15.1899 6.71C15.2836 6.61704 15.358 6.50644 15.4088 6.38458C15.4596 6.26272 15.4857 6.13201 15.4857 6C15.4857 5.86799 15.4596 5.73728 15.4088 5.61542C15.358 5.49356 15.2836 5.38296 15.1899 5.29C15.0026 5.10375 14.7491 4.99921 14.4849 4.99921C14.2207 4.99921 13.9673 5.10375 13.7799 5.29L9.18992 9.88C8.62812 10.4425 8.31256 11.205 8.31256 12C8.31256 12.795 8.62812 13.5575 9.18992 14.12L13.7799 18.71C13.9662 18.8947 14.2176 18.9989 14.4799 19C14.6115 19.0008 14.742 18.9755 14.8638 18.9258C14.9857 18.876 15.0965 18.8027 15.1899 18.71C15.2836 18.617 15.358 18.5064 15.4088 18.3846C15.4596 18.2627 15.4857 18.132 15.4857 18C15.4857 17.868 15.4596 17.7373 15.4088 17.6154C15.358 17.4936 15.2836 17.383 15.1899 17.29L10.5999 12.71Z" fill="#7B7B7B"/>
+</svg>
+
+
+    </Icon>
+  )
+}
+
+export default Lefticon

src/Assets/Icons/Libraryicon.tsx

@@ -0,0 +1,18 @@
+
+import Icon from '../../Types/Icon'
+
+
+const Libraryicon = () => {
+  return (
+    <Icon size={18}>
+    <svg width="23" height="23" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9595 1.85867C12.0778 1.79037 12.212 1.75441 12.3486 1.75441C12.4852 1.75441 12.6194 1.79037 12.7377 1.85867L17.4067 4.55424C17.525 4.62254 17.6232 4.72077 17.6915 4.83907C17.7598 4.95736 17.7958 5.09154 17.7958 5.22814V16.5396C17.7958 16.746 17.7138 16.9439 17.5679 17.0898C17.4219 17.2358 17.224 17.3178 17.0176 17.3178H12.3486C12.1422 17.3178 11.9443 17.2358 11.7984 17.0898C11.6524 16.9439 11.5704 16.746 11.5704 16.5396V2.53256C11.5704 2.39597 11.6064 2.26178 11.6747 2.14349C11.743 2.0252 11.8412 1.92697 11.9595 1.85867ZM13.1268 3.88035V15.7614H16.2395V5.67714L13.1268 3.88035ZM3.01059 17.3178C2.80421 17.3178 2.60628 17.2358 2.46034 17.0898C2.31441 16.9439 2.23242 16.746 2.23242 16.5396V2.53256C2.23242 2.32618 2.31441 2.12825 2.46034 1.98231C2.60628 1.83638 2.80421 1.75439 3.01059 1.75439C3.21697 1.75439 3.4149 1.83638 3.56084 1.98231C3.70677 2.12825 3.78876 2.32618 3.78876 2.53256V16.5396C3.78876 16.746 3.70677 16.9439 3.56084 17.0898C3.4149 17.2358 3.21697 17.3178 3.01059 17.3178ZM7.6796 17.3178C7.47322 17.3178 7.27529 17.2358 7.12935 17.0898C6.98342 16.9439 6.90143 16.746 6.90143 16.5396V2.53256C6.90143 2.32618 6.98342 2.12825 7.12935 1.98231C7.27529 1.83638 7.47322 1.75439 7.6796 1.75439C7.88598 1.75439 8.08391 1.83638 8.22985 1.98231C8.37578 2.12825 8.45777 2.32618 8.45777 2.53256V16.5396C8.45777 16.746 8.37578 16.9439 8.22985 17.0898C8.08391 17.2358 7.88598 17.3178 7.6796 17.3178Z" fill="white" fill-opacity="0.7"/>
+</svg>
+
+
+  </Icon>
+
+  )
+}
+
+export default Libraryicon

src/Assets/Icons/Righticon.tsx

@@ -0,0 +1,16 @@
+
+import Icon from '../../Types/Icon'
+
+const Righticon = () => {
+  return (
+    <Icon>
+     <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3999 9.88L10.8099 5.29C10.6225 5.10375 10.369 4.99921 10.1049 4.99921C9.84068 4.99921 9.58723 5.10375 9.39986 5.29C9.30613 5.38296 9.23174 5.49356 9.18097 5.61542C9.1302 5.73728 9.10406 5.86799 9.10406 6C9.10406 6.13201 9.1302 6.26272 9.18097 6.38458C9.23174 6.50644 9.30613 6.61704 9.39986 6.71L13.9999 11.29C14.0936 11.383 14.168 11.4936 14.2188 11.6154C14.2695 11.7373 14.2957 11.868 14.2957 12C14.2957 12.132 14.2695 12.2627 14.2188 12.3846C14.168 12.5064 14.0936 12.617 13.9999 12.71L9.39986 17.29C9.21156 17.477 9.10524 17.7311 9.10431 17.9965C9.10337 18.2618 9.20789 18.5167 9.39486 18.705C9.58184 18.8933 9.83596 18.9996 10.1013 19.0006C10.3667 19.0015 10.6216 18.897 10.8099 18.71L15.3999 14.12C15.9617 13.5575 16.2772 12.795 16.2772 12C16.2772 11.205 15.9617 10.4425 15.3999 9.88Z" fill="#7B7B7B"/>
+</svg>
+
+
+    </Icon>
+  )
+}
+
+export default Righticon

src/Assets/Icons/Searchicon.tsx

@@ -0,0 +1,22 @@
+
+import Icon from '../../Types/Icon'
+
+const Searchicon = () => {
+  return (
+    <Icon size={18}>
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_61)">
+<path d="M23.9998 22.5867L17.7378 16.3247C19.3644 14.3353 20.1642 11.7968 19.9716 9.23427C19.7791 6.67174 18.609 4.28124 16.7034 2.55723C14.7977 0.833223 12.3024 -0.092395 9.73342 -0.0281632C7.16447 0.0360686 4.71848 1.08524 2.9014 2.90233C1.08431 4.71942 0.0351378 7.1654 -0.029094 9.73435C-0.0933258 12.3033 0.832292 14.7987 2.5563 16.7043C4.28031 18.6099 6.67081 19.78 9.23334 19.9726C11.7959 20.1651 14.3344 19.3653 16.3238 17.7387L22.5858 24.0007L23.9998 22.5867ZM9.99978 18.0007C8.41753 18.0007 6.87081 17.5315 5.55522 16.6525C4.23963 15.7734 3.21425 14.524 2.60875 13.0622C2.00324 11.6004 1.84482 9.99184 2.1535 8.43999C2.46218 6.88814 3.22411 5.46268 4.34293 4.34386C5.46175 3.22504 6.88721 2.46311 8.43906 2.15443C9.99091 1.84575 11.5994 2.00418 13.0612 2.60968C14.5231 3.21518 15.7725 4.24056 16.6515 5.55615C17.5306 6.87174 17.9998 8.41846 17.9998 10.0007C17.9974 12.1217 17.1538 14.1552 15.654 15.6549C14.1542 17.1547 12.1208 17.9983 9.99978 18.0007Z" fill="white" fill-opacity="0.7"/>
+</g>
+<defs>
+<clipPath id="clip0_1_61">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+    </Icon>
+  )
+}
+
+export default Searchicon

src/Components/Card/Card.css

@@ -0,0 +1,13 @@
+.card:hover{
+    cursor: pointer;
+    background-color: #282828;
+    transition: all ease-in-out .3s;
+}
+.btn{
+    display: none!important;
+}
+.card:hover .btn{
+    display: block!important;
+    transition: all ease-in-out .3s ;
+
+}

src/Components/Card/Card.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {FaPlay} from 'react-icons/fa'
+import './Card.css'
+interface CardProps {
+  url?: string;
+  text: string;
+  desc: string;
+}
+
+const Card: React.FC<CardProps> = ({ url, text, desc }) => {
+  return (
+    <div className='w-[190px] h-auto  card rounded-lg cursor-pointer  bg-[#1f1e1e]  items-center p-3 '>
+      <div className='relative'>
+      <img className='w-[150px] h-[150px] rounded-md 'src={url} alt='Playlist Cover z-1' />
+      <button  className='flex btn items-center  absolute justify-center right-0 bottom-0 rounded-[50%] bg-green-500 p-3'> 
+        <FaPlay className='text-2xl text-black'/>
+      </button>
+      </div>
+      <div className='pl-2'>
+        <h1 className='text-[16px] text-white font-bold'>{text}</h1>
+        <p className='text-sm font-bold text-gray-500'>{desc.substring(0,40)}...</p>
+        </div>
+
+    </div>
+  );
+};
+
+export default Card;

src/Components/Searchpagecard.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+interface Searchdata{
+    color:string;
+    title:string;
+    url:string;
+}
+
+const Searchpagecard:React.FC<Searchdata> = ({color,title,url}) => {
+  return (
+    <div className='w-[170px] h-[170px] z-1 rounded-md cursor-pointer m-2 relative overflow-hidden' style={{ backgroundColor: color }}>
+    <h1 className='absolute top-0 left-0 right-0 text-center text-white'>{title}</h1>
+    <img
+        src={url}
+        className='w-[100px] h-[100px] absolute bottom-[-5px] right-[-20px] transform rotate-[20deg]'
+        alt={title}
+    />
+
+</div>
+
+  )
+}
+
+export default Searchpagecard

src/Components/Sidebar.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import Homeicon from '../Assets/Icons/Homeicon';
+import Logo from '../Assets/Icons/Logo';
+import Searchicon from '../Assets/Icons/Searchicon';
+import Libraryicon from '../Assets/Icons/Libraryicon';
+import { Link } from 'react-router-dom';
+import { FaPlus } from 'react-icons/fa';
+import { TbWorld } from 'react-icons/tb';
+
+
+
+const Sidebar:React.FC = () => {
+  return (
+    //max-h-[797px] w-[301px]
+    <div className='fixed w-1/5 h-full px-2 py-2 bg-black '>
+       <div className='w-full h-[155px] bg-customMajor rounded-lg flex flex-col' >
+        <div className='mt-5'>
+          <Logo /> 
+        </div>
+  <Link to='/'>
+        <div className='flex gap-[23px] text-white cursor-pointer rounded-[6px] w-[281px] h-[50px] pl-[26px] mt-[30px] '>
+          <Homeicon/>
+          <h1 className='hidden text-[19px] md:block hover:underline'>Home</h1>
+        </div>
+        </Link>
+  <Link to='/search'>
+        <div className='flex gap-[23px] hover:underline cursor-pointer text-white rounded-[6px] w-[281px] h-[50px] pl-[26px]   '>
+          <Searchicon/>
+          <h1 className='hidden text-[19px] md:block hover:underline'>Search</h1>
+        </div>
+        </Link>  
+       </div>
+
+       <div className=' w-full h-[300px] mt-2 mb-2 overflow-y-auto overflow-x-hidden  rounded-md bg-customMajor'>
+       <div className='flex  text-white rounded-[6px] w-[281px] h-[50px]  items-center justify-between px-2 '>
+       <div className='flex gap-[23px] text-white cursor-pointer rounded-[6px] w-[281px] h-[50px] pl-[26px] mt-[30px] '>
+       <Libraryicon/>
+          <h1 className='hidden  md:text-[19px]  md:block hover:underline'>Your Library</h1>
+          <button className=" ml-auto flex justify-end rounded-[50%] w-auto"><FaPlus className='text-xl font '/></button>
+        </div>
+
+        </div>
+
+        <div className='p-6 text-white font-semibold mt-4 rounded-lg bg-[#242424] w-full h-auto mx-1 '>
+        <p className='font-bold '>Create your first Playlist</p>
+        <p className='font-semibold'>It's easy,we'll help you  </p>
+         <button className='md:px-4 md:py-2 px-2 py-2  mt-4 md:text-[16px] sm:text-sm  font-semibold text-black bg-white rounded-full'>Create Playlist</button>
+       </div>
+       <div className='p-6 text-white font-semibold mt-2 rounded-md bg-[#242424] w-full h-auto mx-1 '>
+        <p className='font-bold  text-sm md:text-[16px]'>Let's find some Podcasts to follow</p>
+        <p className='font-semibold'>We'll keep you updated on new episodes  </p>
+         <button className='md:px-4 md:py-2 px-2 py-2  mt-4 md:text-[16px] sm:text-sm  font-semibold text-black bg-white rounded-full'>Browse Podcasts</button>
+       </div>
+       </div> 
+
+       <div className='flex flex-wrap w-full h-auto gap-4 px-4 mt-4 text-white'>
+        <a href='#' className='mx-4 text-sm text-gray-300' >Legal</a>
+        <a href='#' className='mx-4 text-sm text-gray-300'>Privacy Center</a>
+        <a href='#' className='mx-4 text-sm text-gray-300'>Privacy Policy</a>
+        <a href='#'className='mx-4 text-sm text-gray-300'>Cookies</a>
+        <a href='#'className='mx-4 text-sm text-gray-300'>About Ads</a>
+        <a href='#'className='mx-4 text-sm text-gray-300'>Accessiblity</a>
+        <a href='#'className='mx-4 text-sm text-gray-300'>Legal</a>
+        <a href='#'className='mx-4 text-sm text-gray-300'>Legal</a>
+
+
+       </div>
+       <button className='flex items-center gap-2 px-3 py-1 mx-4 mt-4 text-white border border-white rounded-full '>
+        <TbWorld/>
+        <span className='text-white'>English</span>
+       </button>
+    </div>
+  )
+}
+
+export default Sidebar