feat: add search box UI

app/explore/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { SearchBox } from "./searchBox";
+
+export default function ExplorePage() {
+  return <div className="p-4">
+    <SearchBox />
+  </div>
+}

app/explore/searchBox.tsx

@@ -0,0 +1,53 @@
+import { Card, Input, Select } from "react-daisyui";
+
+const rowsPerPageOptions = [10, 20, 50, 100];
+
+export function SearchBox() {
+  return <Card className="p-4 pt-2 rounded-lg gap-2 flex md:flex-row md:flex-wrap justify-center">
+    <div className="form-control w-full max-w-md">
+      <label className="label">
+        <span className="label-text font-semibold">Tìm kiếm</span>
+      </label>
+      <Input size="sm" placeholder="Tên tk, ngân hàng ..."/>
+    </div>
+    <div className="form-control w-full max-w-md">
+      <label className="label">
+        <span className="label-text font-semibold">Từ ngày</span>
+      </label>
+      <Input type="date" size="sm" />
+    </div>
+    <div className="form-control w-full max-w-md">
+      <label className="label">
+        <span className="label-text font-semibold">Đến ngày</span>
+      </label>
+      <Input type="date" size="sm" />
+    </div>
+
+    <div className="form-control w-full max-w-md">
+      <label className="label">
+        <span className="label-text font-semibold">Số dòng trên trang</span>
+      </label>
+      <Select defaultValue={10} size="sm">
+        {rowsPerPageOptions.map(option => <option key={option} value={option}>{option}</option>)}
+      </Select>
+    </div>
+    <div className="form-control w-full max-w-md">
+      <label className="label">
+        <span className="label-text font-semibold">Sắp xếp theo</span>
+      </label>
+      <Select defaultValue={10} size="sm">
+        <option value="amount">Số tiền</option>
+        <option value="date">Ngày</option>
+      </Select>
+    </div>
+    <div className="form-control w-full max-w-md">
+      <label className="label">
+        <span className="label-text font-semibold">Thứ tự</span>
+      </label>
+      <Select defaultValue={10} size="sm">
+        <option value="asc">Tăng dần</option>
+        <option value="desc">Giảm dần</option>
+      </Select>
+    </div>
+  </Card>
+}

app/header.tsx

@@ -1,13 +1,11 @@
-'use client';
-
 import Link from "next/link";
 
 export function AppHeader() {
-  return <div className="z-10 bg-white px-5 py-4 flex justify-between items-center shadow-md">
-    <div className="font-semibold text-sm">Bão số 3 Yagi</div>
+  return <div className="z-10 px-5 md:px-6 py-4 flex justify-between items-center shadow-md">
+    <div className="font-semibold text-sm md:text-lg">Bão số 3 Yagi</div>
     <div className="flex gap-3">
-      <Link href={'/'} className="font-light text-sm">Trang chủ</Link>
-      <Link href={'/statistic'} className="font-light text-sm">Thống kê</Link>
+      <Link href={'/'} className="text-sm">Trang chủ</Link>
+      <Link href={'/statistic'} className="text-sm">Thống kê</Link>
     </div>
   </div>
 }

app/theme-provider.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Theme, useTheme } from "react-daisyui";
+
+export function ThemeProvider({ children }: Readonly<{ children: React.ReactNode }>) {
+  const { theme } = useTheme('nord');
+
+  return <Theme dataTheme={theme} className="h-[100vh]">
+    {children}
+  </Theme>
+}

next.config.mjs

@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    transpilePackages: ['react-daisyui'],
+    reactStrictMode: true,
+    async redirects() {
+        return [
+            // Basic redirect
+            {
+                source: '/',
+                destination: '/explore',
+                permanent: true,
+            },
+        ]
+    }
+};
 
 export default nextConfig;

states/search.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand'
+
+type SearchState = {
+  search?: string
+  from?: Date
+  to?: Date
+  rowsPerPage: number
+  sortedBy?: 'amount' | 'date'
+  sortOrder?: 'asc' | 'desc'
+  amountFrom?: number
+  amountTo?: number
+}
+
+type SearchAction = {
+  setSearch: (search: string) => void
+  setFrom: (from: Date) => void
+  setTo: (to: Date) => void
+  setRowsPerPage: (rowsPerPage: number) => void
+  setSortedBy: (sortedBy: 'amount' | 'date') => void
+  setSortOrder: (sortOrder: 'asc' | 'desc') => void
+  setAmountFrom: (amountFrom: number) => void
+  setAmountTo: (amountTo: number) => void
+}
+
+export const useSearchStore = create<SearchAction & SearchState>((set) => ({
+  search: '',
+  rowsPerPage: 10,
+  sortedBy: 'date',
+  sortOrder: 'desc',
+  setRowsPerPage: (rowsPerPage) => set({ rowsPerPage }),
+  setSearch: (search) => set({ search }),
+  setFrom: (from) => set({ from }),
+  setTo: (to) => set({ to }),
+  setSortedBy: (sortedBy) => set({ sortedBy }),
+  setSortOrder: (sortOrder) => set({ sortOrder }),
+  setAmountFrom: (amountFrom) => set({ amountFrom }),
+  setAmountTo: (amountTo) => set({ amountTo }),
+}))

tailwind.config.ts

@@ -2,6 +2,7 @@ import { nextui } from "@nextui-org/react";
 import { fontFamily } from "tailwindcss/defaultTheme";
 
 import type { Config } from "tailwindcss";
+import daisyui from "daisyui";
 
 const config = {
   content: [