Update customers view (#196)

* Update tables

* Add new customers, add search, polish

* Make search reusable, update customers

* polish

dashboard/15-final/app/dashboard/customers/page.tsx

@@ -1,9 +1,23 @@
+import { fetchFilteredCustomers } from '@/app/lib/data';
 import CustomersTable from '@/app/ui/customers/table';
 
-export default function Page() {
+export default async function Page({
+  searchParams,
+}: {
+  searchParams:
+    | {
+        query: string | undefined;
+        page: string | undefined;
+      }
+    | undefined;
+}) {
+  const query = searchParams?.query || '';
+
+  const customers = await fetchFilteredCustomers(query);
+
   return (
     <main>
-      <CustomersTable />
+      <CustomersTable customers={customers} />
     </main>
   );
 }

dashboard/15-final/app/dashboard/invoices/page.tsx

@@ -1,5 +1,5 @@
 import Pagination from '@/app/ui/invoices/pagination';
-import Search from '@/app/ui/invoices/search';
+import Search from '@/app/ui/search';
 import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import Table from '@/app/ui/invoices/table';
 import { fetchFilteredInvoices } from '@/app/lib/data';
@@ -29,7 +29,7 @@ export default async function Page({
         <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
       </div>
       <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
-        <Search />
+        <Search placeholder="Search invoices..." />
         <CreateInvoice />
       </div>
       <Table invoices={invoices} />

dashboard/15-final/app/lib/data.ts

@@ -44,7 +44,7 @@ export async function fetchCounts() {
 
 export async function fetchTotalAmountByStatus() {
   try {
-    const data = await sql`SELECT 
+    const data = await sql`SELECT
       SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",
       SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"
       FROM invoices`;
@@ -61,8 +61,8 @@ export async function fetchTotalAmountByStatus() {
 export async function fetchLatestInvoices() {
   try {
     const data = await sql<LatestInvoiceRaw>`
-      SELECT invoices.amount, customers.name, customers.image_url, customers.email 
-      FROM invoices 
+      SELECT invoices.amount, customers.name, customers.image_url, customers.email
+      FROM invoices
       JOIN customers ON invoices.customer_id = customers.id
       ORDER BY invoices.date DESC
       LIMIT 5`;
@@ -92,7 +92,7 @@ export async function fetchFilteredInvoices(
         invoices.amount,
         invoices.date,
         invoices.status,
-        customers.name, 
+        customers.name,
         customers.email,
         customers.image_url
       FROM invoices
@@ -161,7 +161,7 @@ export async function fetchInvoiceById(id: string) {
 export async function fetchCustomerNames() {
   try {
     const data = await sql<CustomerName>`
-      SELECT 
+      SELECT
         id,
         name
       FROM customers
@@ -179,17 +179,17 @@ export async function fetchCustomerNames() {
 export async function fetchCustomersTable() {
   try {
     const data = await sql<CustomersTable>`
-      SELECT 
+      SELECT
         customers.id,
         customers.name,
         customers.email,
         customers.image_url,
         COUNT(invoices.id) AS total_invoices,
-        SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending, 
-        SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid 
-      FROM customers 
-      LEFT JOIN invoices ON customers.id = invoices.customer_id 
-      GROUP BY customers.id, customers.name, customers.email, customers.image_url  
+        SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending,
+        SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid
+      FROM customers
+      LEFT JOIN invoices ON customers.id = invoices.customer_id
+      GROUP BY customers.id, customers.name, customers.email, customers.image_url
       ORDER BY customers.name ASC
     `;
 
@@ -205,3 +205,36 @@ export async function fetchCustomersTable() {
     throw new Error('Failed to fetch customer table.');
   }
 }
+
+export async function fetchFilteredCustomers(query: string) {
+  try {
+    const data = await sql<CustomersTable>`
+		SELECT
+		  customers.id,
+		  customers.name,
+		  customers.email,
+		  customers.image_url,
+		  COUNT(invoices.id) AS total_invoices,
+		  SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending,
+		  SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid
+		FROM customers
+		LEFT JOIN invoices ON customers.id = invoices.customer_id
+		WHERE
+		  customers.name ILIKE ${`%${query}%`} OR
+        customers.email ILIKE ${`%${query}%`}
+		GROUP BY customers.id, customers.name, customers.email, customers.image_url
+		ORDER BY customers.name ASC
+	  `;
+
+    const customers = data.rows.map((customer) => ({
+      ...customer,
+      total_pending: formatCurrency(customer.total_pending),
+      total_paid: formatCurrency(customer.total_paid),
+    }));
+
+    return customers;
+  } catch (err) {
+    console.error('Database Error:', err);
+    throw new Error('Failed to fetch customer table.');
+  }
+}

dashboard/15-final/app/lib/definitions.ts

@@ -65,6 +65,16 @@ export type CustomersTable = {
   total_paid: number;
 };
 
+export type FormattedCustomersTable = {
+  id: string;
+  name: string;
+  email: string;
+  image_url: string;
+  total_invoices: number;
+  total_pending: string;
+  total_paid: string;
+};
+
 export type CustomerName = {
   id: string;
   name: string;

dashboard/15-final/app/lib/dummy-data.js

@@ -10,28 +10,52 @@ const users = [
 
 const customers = [
   {
-    id: '93980f8c-a5e4-484c-a469-2d12ca8fdde3',
-    name: 'Ada Lovelace',
-    email: 'ada@lovelace.com',
-    image_url: '/customers/ada-lovelace.png',
+    id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
+    name: 'Delba de Oliveira',
+    email: 'delba@oliveira.com',
+    image_url: '/customers/delba-de-oliveira.png',
   },
   {
-    id: 'e53120f8-0301-437b-924a-0288f4ec6040',
-    name: 'Grace Hopper',
-    email: 'grace@hopper.com',
-    image_url: '/customers/grace-hopper.png',
-  },
-  {
-    id: '030fab4c-18d7-4ed2-814c-4171cc67bca8',
-    name: 'Hedy Lammar',
-    email: 'hedy@lammar.com',
-    image_url: '/customers/hedy-lammar.png',
+    id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
+    name: 'Lee Robinson',
+    email: 'lee@robinson.com',
+    image_url: '/customers/lee-robinson.png',
   },
   {
     id: '3958dc9e-737f-4377-85e9-fec4b6a6442a',
-    name: 'Margaret Hamilton',
-    email: 'margaret@hamilton.com',
-    image_url: '/customers/margaret-hamilton.png',
+    name: 'Guillermo Rauch',
+    email: 'guillermo@rauch.com',
+    image_url: '/customers/guillermo-rauch.png',
+  },
+  {
+    id: '50ca3e18-62cd-11ee-8c99-0242ac120002',
+    name: 'Jared Palmer',
+    email: 'jared@palmer.com',
+    image_url: '/customers/jared-palmer.png',
+  },
+  {
+    id: '3958dc9e-787f-4377-85e9-fec4b6a6442a',
+    name: 'Steph Dietz',
+    email: 'steph@dietz.com',
+    image_url: '/customers/steph-dietz.png',
+  },
+  {
+    id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
+    name: 'Tom Occhino',
+    email: 'tom@occhino.com',
+    image_url: '/customers/tom-occhino.png',
+  },
+  {
+    id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
+    name: 'Evil Rabbit',
+    email: 'evil@rabbit.com',
+    image_url: '/customers/evil-rabbit.png',
+  },
+  {
+    id: '126eed9c-c90c-4ef6-a4a8-fcf7408d3c66',
+    name: 'Emil Kowalski',
+    email: 'emil@kowalski.com',
+    image_url: '/customers/emil-kowalski.png',
   },
 ];
 
@@ -49,7 +73,7 @@ const invoices = [
     date: '2022-11-14',
   },
   {
-    customer_id: customers[2].id,
+    customer_id: customers[4].id,
     amount: 3040,
     status: 'paid',
     date: '2022-10-29',
@@ -61,19 +85,19 @@ const invoices = [
     date: '2023-09-10',
   },
   {
-    customer_id: customers[0].id,
+    customer_id: customers[5].id,
     amount: 34577,
     status: 'pending',
     date: '2023-08-05',
   },
   {
-    customer_id: customers[1].id,
+    customer_id: customers[7].id,
     amount: 54246,
     status: 'pending',
     date: '2023-07-16',
   },
   {
-    customer_id: customers[2].id,
+    customer_id: customers[6].id,
     amount: 8945,
     status: 'pending',
     date: '2023-06-27',
@@ -85,13 +109,13 @@ const invoices = [
     date: '2023-06-09',
   },
   {
-    customer_id: customers[2].id,
+    customer_id: customers[4].id,
     amount: 1250,
     status: 'paid',
     date: '2023-06-17',
   },
   {
-    customer_id: customers[0].id,
+    customer_id: customers[5].id,
     amount: 8945,
     status: 'paid',
     date: '2023-06-07',
@@ -103,7 +127,7 @@ const invoices = [
     date: '2023-08-19',
   },
   {
-    customer_id: customers[2].id,
+    customer_id: customers[5].id,
     amount: 8945,
     status: 'paid',
     date: '2023-06-03',
@@ -115,7 +139,7 @@ const invoices = [
     date: '2023-06-18',
   },
   {
-    customer_id: customers[3].id,
+    customer_id: customers[0].id,
     amount: 8945,
     status: 'paid',
     date: '2023-10-04',

dashboard/15-final/app/ui/button.tsx

@@ -9,7 +9,7 @@ export function Button({ children, className, ...rest }: ButtonProps) {
     <button
       {...rest}
       className={clsx(
-        'flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500',
+        'flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
         className,
       )}
     >

dashboard/15-final/app/ui/customers/table.tsx

@@ -1,43 +1,89 @@
-import { fetchCustomersTable } from '@/app/lib/data';
 import Image from 'next/image';
+import { lusitana } from '@/app/ui/fonts';
+import Search from '../search';
+import { CustomersTable, FormattedCustomersTable } from '@/app/lib/definitions';
 
-export default async function CustomersTable() {
-  const customers = await fetchCustomersTable();
-
+export default async function CustomersTable({
+  customers,
+}: {
+  customers: FormattedCustomersTable[];
+}) {
   return (
     <div className="w-full">
-      <div className="flex w-full items-center justify-between">
-        <h1 className="text-base font-semibold">Customers</h1>
-      </div>
-      <div className="mt-8 flow-root">
+      <h1 className={`${lusitana.className} mb-8 text-xl md:text-2xl`}>
+        Customers
+      </h1>
+      <Search placeholder="Search customers..." />
+      <div className="mt-6 flow-root">
         <div className="overflow-x-auto">
           <div className="inline-block min-w-full align-middle">
-            <div className="overflow-hidden rounded-md border">
-              <table className="min-w-full divide-y divide-gray-300">
-                <thead className="bg-gray-50 text-left text-sm">
+            <div className="overflow-hidden rounded-md bg-gray-50 p-2 md:pt-0">
+              <div className="md:hidden">
+                {customers?.map((customer) => (
+                  <div
+                    key={customer.id}
+                    className="mb-2 w-full rounded-md bg-white p-4"
+                  >
+                    <div className="flex items-center justify-between border-b pb-4">
+                      <div>
+                        <div className="mb-2 flex items-center">
+                          <div className="flex items-center gap-3">
+                            <Image
+                              src={customer.image_url}
+                              className="rounded-full"
+                              alt={`${customer.name}'s profile picture`}
+                              width={28}
+                              height={28}
+                            />
+                            <p>{customer.name}</p>
+                          </div>
+                        </div>
+                        <p className="text-sm text-gray-500">
+                          {customer.email}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex w-full items-center justify-between border-b py-5">
+                      <div className="flex w-1/2 flex-col">
+                        <p className="text-xs">Pending</p>
+                        <p className="font-medium">{customer.total_pending}</p>
+                      </div>
+                      <div className="flex w-1/2 flex-col">
+                        <p className="text-xs">Paid</p>
+                        <p className="font-medium">{customer.total_paid}</p>
+                      </div>
+                    </div>
+                    <div className="pt-4 text-sm">
+                      <p>{customer.total_invoices} invoices</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <table className="hidden min-w-full rounded-md text-gray-900 md:table">
+                <thead className="rounded-md bg-gray-50 text-left text-sm font-normal">
                   <tr>
-                    <th scope="col" className="px-4 py-4 sm:pl-6">
+                    <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
                       Name
                     </th>
-                    <th scope="col" className="px-4 py-4 font-semibold">
+                    <th scope="col" className="px-3 py-5 font-medium">
                       Email
                     </th>
-                    <th scope="col" className="px-4 py-4 font-semibold">
+                    <th scope="col" className="px-3 py-5 font-medium">
                       Total Invoices
                     </th>
-                    <th scope="col" className="px-4 py-4 font-semibold">
+                    <th scope="col" className="px-3 py-5 font-medium">
                       Total Pending
                     </th>
-                    <th scope="col" className="px-4 py-4 font-semibold">
+                    <th scope="col" className="px-4 py-5 font-medium">
                       Total Paid
                     </th>
                   </tr>
                 </thead>
 
-                <tbody className="divide-y divide-gray-200 bg-white text-gray-500">
+                <tbody className="divide-y divide-gray-200 text-gray-900">
                   {customers.map((customer) => (
-                    <tr key={customer.id}>
-                      <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-black sm:pl-6">
+                    <tr key={customer.id} className="group">
+                      <td className="whitespace-nowrap bg-white py-5 pl-4 pr-3 text-sm text-black group-first-of-type:rounded-md group-last-of-type:rounded-md sm:pl-6">
                         <div className="flex items-center gap-3">
                           <Image
                             src={customer.image_url}
@@ -49,16 +95,16 @@ export default async function CustomersTable() {
                           <p>{customer.name}</p>
                         </div>
                       </td>
-                      <td className="whitespace-nowrap px-4 py-4 text-sm">
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
                         {customer.email}
                       </td>
-                      <td className="whitespace-nowrap px-4 py-4 text-sm">
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
                         {customer.total_invoices}
                       </td>
-                      <td className="whitespace-nowrap px-4 py-4 text-sm">
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
                         {customer.total_pending}
                       </td>
-                      <td className="whitespace-nowrap px-4 py-4 text-sm">
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md">
                         {customer.total_paid}
                       </td>
                     </tr>

dashboard/15-final/app/ui/invoices/buttons.tsx

@@ -6,7 +6,7 @@ export function CreateInvoice() {
   return (
     <Link
       href="/dashboard/invoices/create"
-      className="flex rounded-md bg-blue-600 px-3 py-2 text-center text-sm text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+      className="flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
     >
       <span className="hidden md:block">Create Invoice</span>{' '}
       <PlusIcon className="h-5 md:ml-4" />
@@ -18,7 +18,7 @@ export function UpdateInvoice({ id }: { id: string }) {
   return (
     <Link
       href={`/dashboard/invoices/${id}/edit`}
-      className="rounded-md border p-2 hover:opacity-60"
+      className="rounded-md border p-2 hover:bg-gray-100"
     >
       <PencilIcon className="w-5" />
     </Link>
@@ -29,7 +29,7 @@ export function DeleteInvoice({ id }: { id: string }) {
   return (
     <form action={deleteInvoice}>
       <input type="hidden" name="id" value={id} />
-      <button className="rounded-md border p-2 hover:opacity-60">
+      <button className="rounded-md border p-2 hover:bg-gray-100">
         <span className="sr-only">Delete</span>
         <TrashIcon className="w-5" />
       </button>

dashboard/15-final/app/ui/invoices/pagination.tsx

@@ -16,8 +16,8 @@ export default function Pagination({
   const searchParams = useSearchParams();
 
   const allPages = Array.from({ length: totalPages }, (_, i) => i + 1);
-  const PreviousPageTag = currentPage === 1 ? 'p' : Link;
-  const NextPageTag = currentPage === totalPages ? 'p' : Link;
+  const PreviousPageTag = Link;
+  const NextPageTag = Link;
 
   const createPageUrl = (pageNumber: number) => {
     const params = new URLSearchParams(searchParams);
@@ -30,9 +30,10 @@ export default function Pagination({
       <PreviousPageTag
         href={createPageUrl(currentPage - 1)}
         className={clsx(
-          'mr-4 flex h-10 w-10 items-center justify-center rounded-md ring-1 ring-inset ring-gray-300 hover:opacity-60',
+          'mr-4 flex h-10 w-10 items-center justify-center rounded-md ring-1 ring-inset ring-gray-300 hover:bg-gray-100',
           {
-            'text-gray-300': currentPage === 1,
+            'pointer-events-none text-gray-300 hover:bg-transparent':
+              currentPage === 1,
           },
         )}
       >
@@ -48,7 +49,7 @@ export default function Pagination({
               className={clsx(
                 i === 0 && 'rounded-l-md',
                 i === allPages.length - 1 && 'rounded-r-md',
-                'flex h-10 w-10 items-center justify-center text-sm ring-1 ring-inset ring-gray-300',
+                'flex h-10 w-10 items-center justify-center text-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100',
                 {
                   'z-10 bg-blue-600 text-white ring-blue-600':
                     currentPage === page,
@@ -63,7 +64,7 @@ export default function Pagination({
       <NextPageTag
         href={createPageUrl(currentPage + 1)}
         className={clsx(
-          'ml-4 flex h-10 w-10 items-center justify-center rounded-md ring-1 ring-inset ring-gray-300 hover:opacity-60',
+          'ml-4 flex h-10 w-10 items-center justify-center rounded-md ring-1 ring-inset ring-gray-300 hover:bg-gray-100',
           {
             'text-gray-300': currentPage === totalPages,
           },

dashboard/15-final/app/ui/invoices/status.tsx

@@ -5,7 +5,7 @@ export default function InvoiceStatus({ status }: { status: string }) {
   return (
     <span
       className={clsx(
-        'inline-flex items-center rounded-full px-2 py-1 text-sm',
+        'inline-flex items-center rounded-full px-2 py-1 text-xs',
         {
           'bg-gray-100 text-gray-500': status === 'pending',
           'bg-green-500 text-white': status === 'paid',
@@ -15,13 +15,13 @@ export default function InvoiceStatus({ status }: { status: string }) {
       {status === 'pending' ? (
         <>
           Pending
-          <ClockIcon className="ml-1 w-5 text-gray-500" />
+          <ClockIcon className="ml-1 w-4 text-gray-500" />
         </>
       ) : null}
       {status === 'paid' ? (
         <>
           Paid
-          <CheckIcon className="ml-1 w-5 text-white" />
+          <CheckIcon className="ml-1 w-4 text-white" />
         </>
       ) : null}
     </span>

dashboard/15-final/app/ui/invoices/table.tsx

@@ -27,11 +27,11 @@ export default async function InvoicesTable({
     }
   `;
   return (
-    <div className="mt-4 flow-root">
+    <div className="mt-6 flow-root">
       <style>{styles}</style>
       <div>
         <div className="inline-block min-w-full align-middle">
-          <div className="rounded-lg bg-gray-50 p-2">
+          <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
             <div className="md:hidden">
               {invoices?.map((invoice) => (
                 <div
@@ -70,21 +70,21 @@ export default async function InvoicesTable({
               ))}
             </div>
             <table className="hidden min-w-full text-gray-900 md:table">
-              <thead className="rounded-lg  text-left text-sm font-normal">
+              <thead className="rounded-lg text-left text-sm font-normal">
                 <tr>
-                  <th scope="col" className="px-6 pb-4 pt-2">
+                  <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
                     Customer
                   </th>
-                  <th scope="col" className="px-3 pb-4 pt-2">
+                  <th scope="col" className="px-3 py-5 font-medium">
                     Email
                   </th>
-                  <th scope="col" className="px-3 pb-4 pt-2">
+                  <th scope="col" className="px-3 py-5 font-medium">
                     Amount
                   </th>
-                  <th scope="col" className="px-3 pb-4 pt-2">
+                  <th scope="col" className="px-3 py-5 font-medium">
                     Date
                   </th>
-                  <th scope="col" className="px-3 pb-4 pt-2">
+                  <th scope="col" className="px-3 py-5 font-medium">
                     Status
                   </th>
                   <th
@@ -97,7 +97,10 @@ export default async function InvoicesTable({
               </thead>
               <tbody className="bg-white">
                 {invoices?.map((invoice) => (
-                  <tr key={invoice.id} className="w-full">
+                  <tr
+                    key={invoice.id}
+                    className="w-full border-b text-sm last-of-type:border-none"
+                  >
                     <td className="whitespace-nowrap px-6 py-5">
                       <div className="flex items-center gap-3">
                         <Image
@@ -110,19 +113,19 @@ export default async function InvoicesTable({
                         <p>{invoice.name}</p>
                       </div>
                     </td>
-                    <td className="whitespace-nowrap px-3 py-4">
+                    <td className="whitespace-nowrap px-3 py-3">
                       {invoice.email}
                     </td>
-                    <td className="whitespace-nowrap px-3 py-4">
+                    <td className="whitespace-nowrap px-3 py-3">
                       {formatCurrency(invoice.amount)}
                     </td>
-                    <td className="whitespace-nowrap px-3 py-4">
+                    <td className="whitespace-nowrap px-3 py-3">
                       {formatDateToLocal(invoice.date)}
                     </td>
-                    <td className="whitespace-nowrap px-3 py-4">
+                    <td className="whitespace-nowrap px-3 py-3">
                       <InvoiceStatus status={invoice.status} />
                     </td>
-                    <td className="flex justify-end gap-2 whitespace-nowrap px-6 py-4">
+                    <td className="flex justify-end gap-2 whitespace-nowrap px-6 py-3">
                       <UpdateInvoice id={invoice.id} />
                       <DeleteInvoice id={invoice.id} />
                     </td>

dashboard/15-final/app/ui/search.tsx

@@ -4,7 +4,7 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useDebouncedCallback } from 'use-debounce';
 
-export default function Search() {
+export default function Search({ placeholder }: { placeholder: string }) {
   const searchParams = useSearchParams();
   const { replace } = useRouter();
   const pathname = usePathname();
@@ -22,22 +22,19 @@ export default function Search() {
   }, 300);
 
   return (
-    <div className="min-w-md relative grow md:mr-4">
+    <div className="relative flex flex-1 flex-shrink-0">
       <label htmlFor="search" className="sr-only">
         Search
       </label>
-      <div className="relative flex h-10 items-center px-2 py-2">
-        <MagnifyingGlassIcon className="h-5 text-gray-400" />
-        <input
-          type="text"
-          placeholder="Search..."
-          className="absolute inset-0 h-full w-full rounded-md border border-gray-300 bg-transparent pl-8 text-sm"
-          onChange={(e) => {
-            handleSearch(e.target.value);
-          }}
-          defaultValue={searchParams.get('query')?.toString()}
-        />
-      </div>
+      <input
+        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+        placeholder={placeholder}
+        onChange={(e) => {
+          handleSearch(e.target.value);
+        }}
+        defaultValue={searchParams.get('query')?.toString()}
+      />
+      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
     </div>
   );
 }