feat: add search bar

reline-digital · Mar 23, 2024 · b24066d · b24066d
1 parent 11ec6c1
commit b24066d
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
@@ -1,10 +1,14 @@
 import { CardList } from '@/containers'
+import { SearchBar } from '@/components'
 
 export default function Index() {
   return (
     <>
-      <header className="bg-primary mb-10 bg-[url('/assets/images/bg-header.svg')] bg-cover py-14"></header>
-      <main className="mx-auto max-w-[90%] md:container">
+      <header className="bg-primary bg-[url('/assets/images/bg-header.svg')] bg-cover py-14"></header>
+      <div className="-mt-8">
+        <SearchBar />
+      </div>
+      <main className="mx-auto mt-10 max-w-[90%] md:container">
         <CardList />
       </main>
     </>

diff --git a/apps/frontend/src/components/Card.tsx b/apps/frontend/src/components/Card.tsx
@@ -1,13 +1,12 @@
-import { Job } from '@/Types'
+import { Job } from '@/types'
 import Image from 'next/image'
 import React from 'react'
-import { Pill } from './Pill'
+import { Pill } from '.'
 
 export function Card({ job }: { job: Job }) {
-  console.log(job)
   return (
     <div
-      className={`${job.featured ? 'border-primary border-l-4' : null} flex flex-col justify-between gap-4 rounded bg-white  p-4 font-semibold shadow-lg md:flex-row md:items-center  md:gap-8 md:px-6 md:py-8`}
+      className={`${job.featured ? 'border-primary border-l-4' : null} flex flex-col justify-between gap-4 rounded bg-white p-4 font-semibold shadow-lg md:flex-row md:items-center  md:gap-8 md:px-6 md:py-8`}
     >
       <div className="md:flex md:items-center md:gap-4">
         <Image
@@ -45,7 +44,7 @@ export function Card({ job }: { job: Job }) {
       </div>
       <hr className="md:hidden" />
       <div className="flex flex-wrap items-center gap-4 ">
-        <Pill tag>{job.role}</Pill>
+        <Pill>{job.role}</Pill>
         <Pill>{job.level}</Pill>
         {job.languages.map((language) => (
           <Pill key={language}>{language}</Pill>

diff --git a/apps/frontend/src/components/Pill.tsx b/apps/frontend/src/components/Pill.tsx
@@ -6,14 +6,14 @@ export function Pill({
   tag?: boolean
 }) {
   return (
-    <div className="flex transition-colors">
+    <div className="flex">
       <div
-        className={`${tag ? 'rounded-s' : 'hover:bg-primary hover:text-tertiary cursor-pointer rounded'} bg-tertiary text-primary px-2 py-0.5  capitalize`}
+        className={`${tag ? 'rounded-s' : 'hover:bg-primary hover:text-tertiary cursor-pointer rounded'} bg-tertiary text-primary px-2 py-0.5 font-medium capitalize  transition-colors`}
       >
         {children}
       </div>
       {tag && (
-        <button className="bg-primary hover:bg-secondary rounded-e px-2">
+        <button className="bg-primary hover:bg-secondary rounded-e px-2 transition-colors">
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
             <path
               fill="#FFF"

diff --git a/apps/frontend/src/components/SearchBar.tsx b/apps/frontend/src/components/SearchBar.tsx
@@ -0,0 +1,14 @@
+import { Pill } from '.'
+
+export function SearchBar() {
+  return (
+    <div className="mx-auto flex max-w-[90%] items-center justify-between gap-2 rounded bg-white p-4 shadow-lg md:container md:px-6 md:py-4 ">
+      <div className="flex flex-wrap items-center gap-4">
+        <Pill tag>Frontend</Pill>
+      </div>
+      <button className="hover:text-primary text-secondary-light bg-transparent px-4 py-2 font-medium underline">
+        Clear
+      </button>
+    </div>
+  )
+}
diff --git a/apps/frontend/src/components/index.ts b/apps/frontend/src/components/index.ts
@@ -1,2 +1,3 @@
 export { Card } from './Card'
 export { Pill } from './Pill'
+export { SearchBar } from './SearchBar'
diff --git a/apps/frontend/src/containers/CardList.tsx b/apps/frontend/src/containers/CardList.tsx
@@ -1,8 +1,8 @@
 import { Card } from '@/components'
-import type { Job } from '@/Types'
+import type { Job } from '@/types'
 
 export async function CardList() {
-  let data = await fetch('http://localhost:5000/api/v1/jobs')
+  let data = await fetch(`${process.env.NEXT_PUBLIC_BASE_API}/jobs`)
   let { jobs }: { jobs: Job[] } = await data.json()
   return (
     <div className="mb-10 flex flex-col gap-12 md:gap-8">