Menambahkan Folder Di Folder Visual Code Studio

Sekarang Kita Akan Menambahkan Beberapa Folder Dan File Di Visual Code Studio

Pada Folder src buat berap sub folder beri nama componens dan pages

nah selanjutnya di folder componens buat sub folder lagi yaitu folder Folder Admin, Common, Layout, Product dan Cart

Lihat Gambar 

Letakkan Kode Berikut Ke App.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";

import UserLayout from "./components/Layout/UserLayout";

const App = () => {

  return (

    <BrowserRouter>

    <Routes>

      <Route path="/" element={<UserLayout />}>{/* User Layout */}</Route>

      <Route>{/* Admin Layout */}</Route>

    </Routes>

    </BrowserRouter>

  )

}

export default App

Lalu Di File Userlayout.jsx letakkan Kode Berikut

import Header from "../Common/Header";

const UserLayout = () => {

  return (

    <div>

      {/* Header */}

      <Header />

      {/* Main Content */}

      {/* Footer */}

    </div>

  );

};

export default UserLayout;

Lalu Buat file Di folder common beri nama Header.jsx lalu letakkan kode berikut

import Topbar from "../Layout/Topbar"

const Header = () => {

  return (

      <div>

        {/* Topbar */}

        <Topbar />

        {/* Navbar */}

        {/* Cart Drawer */}

      </div>

   

  )

}

export default Header

Sekarang Di folder Layout Buat file baru beri nama Topbar.jsx

Masukkan Kode berikut ini

import {TbBrandMeta} from "react-icons/tb"

import {IoLogoInstagram} from "react-icons/io"

import {RiTwitterXLine} from "react-icons/ri"

const Topbar = () => {

  return (

    <div className="bg-[#ea2e0e] text-white">

    <div className="container mx-auto flex justify-between items-center py-3 px-4">

    <div className="hidden md:flex items-center space-x-4">

        <a href="#" className="hover:text-gray-300">

            <TbBrandMeta className="h-5 w-5"/>

        </a>

        <a href="#" className="hover:text-gray-300">

            <IoLogoInstagram className="h-5 w-5"/>

        </a>

        <a href="#" className="hover:text-gray-300">

           <RiTwitterXLine className="h-4 w-4" />

        </a>

    </div>

    <div className="text-sm text-center flex-grow">

         <span>We ship worldwide - Fast and reliable shipping!</span>

    </div>

    <div className="text-sm hidden md:block">

        <a href="tel:+1234567890" className="hover:text-gray-300">

             +1 (234) 567890

        </a>

    </div>

    </div>

    </div>

)

}

export default Topbar;

Penjelasan:

Kode ini adalah komponen React yang membuat top bar dengan elemen-elemen berikut:

div terluar dengan className bg-[#ea2e0e] text-white: Div ini berfungsi sebagai kontainer keseluruhan top bar dan memberikan warna latar belakang bg-[#ea2e0e] dan warna teks putih text-white.

div dengan className container mx-auto flex justify-between items-center py-3 px-4: Ini div adalah wrapper untuk elemen-elemen di dalam top bar dan mengaturnya dengan menggunakan flexbox:

container mx-auto: Memastikan div menjadi container responsif dan di tengah horizontal.

flex justify-between: Menggunakan flexbox agar item-item di dalam div ini diatur agar memiliki spasi yang merata antara item dan diletakkan di ujung-ujung container.

items-center: Membuat item-item di dalam div ini di tengah vertikal.

py-3 px-4: Memberikan padding vertikal 3 dan horizontal 4.

div dengan className hidden md:flex items-center space-x-4: Menampung ikon-ikon media sosial (Facebook, Instagram, Twitter) dengan style:

hidden md:flex: Menjadikan div ini tersembunyi saat layar kecil dan menjadi flex saat ukuran medium atau lebih besar.

items-center: membuat item-item di dalamnya menjadi center vertikal.

space-x-4: Menambahkan space horizontal antara item-item sebesar 4.

a dengan href="#" dan className="hover:text-gray-300": Elemen-elemen a digunakan sebagai link ke halaman lain (meskipun saat ini mengarah ke #) dan memberikan efek hover dengan warna teks abu-abu.

<TbBrandMeta className="h-5 w-5"/> : Menambahkan ikon facebook.

<IoLogoInstagram className="h-5 w-5"/> : Menambahkan ikon instagram.

<RiTwitterXLine className="h-4 w-4" /> : Menambahkan ikon twitter.

div dengan className text-sm text-center flex-grow: Menampilkan pesan pengiriman dan menempatkan teks ditengah secara horizontal.

text-sm: Memberikan style teks berukuran kecil

text-center: Membuat teks di dalam div ini di tengah horizontal

flex-grow: Memungkinkan div ini mengisi sisa ruang pada baris flex

div dengan className text-sm hidden md:block: Menampilkan nomor telepon

text-sm: Memberikan style teks berukuran kecil

hidden md:block: Menyembunyikan div ini saat ukuran layar kecil dan menampilkannya saat ukuran medium atau lebih besar.

a dengan href="tel:+1234567890" dan className="hover:text-gray-300": Elemen a digunakan untuk link ke nomor telepon dan memberikan efek hover dengan warna teks abu-abu.

Catatan Tambahan:

Kode ini menggunakan Tailwind CSS untuk styling. className yang ada adalah utility class dari Tailwind CSS.

TbBrandMeta, IoLogoInstagram, dan RiTwitterXLine diasumsikan adalah komponen ikon dari suatu library.

Komponen ini diasumsikan digunakan di dalam aplikasi React karena ditulis dengan JSX dan dieksport menggunakan export default Topbar;

lalu di save maka anda akan melihat tampilan di browser seperti ini