basic component structure

ziadevcom · Jun 20, 2023 · 991d07e · 991d07e
1 parent 01b18f0
commit 991d07e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 2 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,15 @@
-export default function App() {
-  return <h1 className="text-3xl">Hello world!</h1>;
+import Header from "./Components/Header/Header";
+import AudioPlayer from "./Components/AudioPlayer/AudioPlayer";
+import Body from "./Components/Body/Body";
+
+function App() {
+  return (
+    <main className="grid grid-rows-3r grid-cols-1 items-center justify-center bg-bg-darker w-4/5 h-4/5 p-8 rounded">
+      <Header />
+      <Body />
+      <AudioPlayer />
+    </main>
+  );
 }
+
+export default App;
diff --git a/src/Components/AudioPlayer/AudioPlayer.jsx b/src/Components/AudioPlayer/AudioPlayer.jsx
@@ -0,0 +1,5 @@
+function AudioPlayer() {
+  return <h2>Audio Player</h2>;
+}
+
+export default AudioPlayer;
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
@@ -0,0 +1,16 @@
+// import { Link } from "react-router-dom";
+import Logo from "./Logo";
+import Socials from "./Socials";
+import Search from "./Search/Search";
+
+function Header() {
+  return (
+    <header className="flex justify-between w-full">
+      <Logo />
+      <Search />
+      <Socials />
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/Components/Search/Search.jsx b/src/Components/Search/Search.jsx
@@ -0,0 +1,3 @@
+export default function Search() {
+  return <h2> Search </h2>;
+}
diff --git a/src/Components/Songs/Songs.jsx b/src/Components/Songs/Songs.jsx
@@ -0,0 +1,5 @@
+function Songs() {
+  return <h2>Songs </h2>;
+}
+
+export default Songs;