Skip to content

Commit

Permalink
Merge pull request #26 from 202306-NEA-DZ-FEW/16-underbar
Browse files Browse the repository at this point in the history
Underbar component
  • Loading branch information
KatiaGhezali authored Oct 18, 2023
2 parents 23ed54c + 1fab482 commit 0c36cc3
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 3 deletions.
89 changes: 86 additions & 3 deletions src/components/UnderBar/UnderBar.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,90 @@
import React from "react";

function UnderBar() {
return <div>UnderBar</div>;
import Link from "next/link";
import { twMerge } from "tailwind-merge";
function UnderBar({ className }) {
return (
<div
className={twMerge(
"bg-[#585785] font-bold md:font-semibold md:bg-[#585785] lg:bg-[#585785] lg:font-semibold",
className
)}
>
<ul className='p-4 md:p-0 md:flex md:justify-around lg:p- lg:flex lg:justify-around lg:w-[75%] lg:mx-auto '>
<li>
<Link
href={"#"}
className='capitalize underline hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
All Categories
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Electronics
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Books
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Gaming
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Clothes
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Shoes
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Food
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Transportation
</Link>
</li>
<li>
<Link
href={"#"}
className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 '
>
Furniture
</Link>
</li>
</ul>
</div>
);
}

export default UnderBar;
7 changes: 7 additions & 0 deletions src/components/UnderBar/__test__/UnderBar.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import renderer from "react-test-renderer";
import UnderBar from "../UnderBar";

it("renders correctly", () => {
const tree = renderer.create(<UnderBar />).toJSON();
expect(tree).toMatchSnapshot();
});
111 changes: 111 additions & 0 deletions src/components/UnderBar/__test__/__snapshots__/UnderBar.test.js.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<div
className="bg-[#585785] font-bold md:font-semibold md:bg-[#585785] lg:bg-[#585785] lg:font-semibold"
>
<ul
className="p-4 md:p-0 md:flex md:justify-around lg:p- lg:flex lg:justify-around lg:w-[75%] lg:mx-auto "
>
<li>
<a
className="capitalize underline hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
All Categories
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Electronics
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Books
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Gaming
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Clothes
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Shoes
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Food
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Transportation
</a>
</li>
<li>
<a
className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0 "
href="#"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
>
Furniture
</a>
</li>
</ul>
</div>
`;

0 comments on commit 0c36cc3

Please sign in to comment.