Feat/detail

src/app/[id]/layout.tsx

@@ -1,12 +1,13 @@
-import { ScrollArea } from '@/components/ui/scroll-area';
+import BackButton from '@/components/backButton/backButton';
 
 export default function DetailLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex h-screen flex-1 overflow-hidden overflow-y-auto">
+    <div className="relative flex h-screen flex-1 overflow-hidden overflow-y-auto">
+      <BackButton />
       {children}
     </div>
   );

src/app/layout.tsx

@@ -3,8 +3,6 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import Header from '@/components/header/header';
 import GoTopButton from '@/components/goTopButton/goTopButton';
-import BackButton from '@/components/backButton/backButton';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import Sidebar from '@/components/sidebar/sidebar';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -32,7 +30,6 @@ export default function RootLayout({
           </div>
         </div>
         <GoTopButton />
-        <BackButton />
       </body>
     </html>
   );

src/components/searchBar/searchBar.tsx

@@ -0,0 +1,28 @@
+import { Search } from 'lucide-react';
+import React, { ChangeEvent } from 'react';
+
+interface ISearchBar {
+  query: string;
+  handleQueryChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const SearchBar: React.FC<ISearchBar> = ({ query, handleQueryChange }) => {
+  return (
+    <div className="relative flex w-full justify-center bg-slate-800 p-4">
+      <div className="relative w-full max-w-md">
+        <Search
+          size={24}
+          className="absolute left-4 top-1/2 -translate-y-1/2 transform text-slate-500"
+        />
+        <input
+          placeholder="Cari Surat"
+          className="w-full rounded-full border-2 border-slate-300 py-2 pl-12 pr-4 text-black focus:border-slate-500"
+          value={query}
+          onChange={handleQueryChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;

src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

src/modules/home/home.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { ChangeEvent, useEffect, useState } from 'react';
 import { getAllSurah } from '@/api/api';
 import { ISurah } from '@/constant/surah.constant';
 import Link from 'next/link';
-import { ScrollArea } from '@/components/ui/scroll-area';
+import SearchBar from '@/components/searchBar/searchBar';
 
 const HomeModule: React.FC = () => {
   const [surahs, setSurahs] = useState<ISurah[]>([]);
+  const [query, setQuery] = useState<string>('');
 
   useEffect(() => {
     const fetchData = async () => {
@@ -22,38 +23,44 @@ const HomeModule: React.FC = () => {
     fetchData();
   }, []);
 
+  const handleQueryChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setQuery(e.target.value);
+
   return (
     <div className="max-w-screen mt-36 flex min-h-screen flex-col items-center md:mt-28">
       <h1 className="text-2xl font-bold">Baca Al-Quran Online</h1>
+      <SearchBar query={query} handleQueryChange={handleQueryChange} />
       <div className="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {surahs.map((surah, _index) => (
-          <Link
-            href={`/${surah.nomor}`}
-            key={surah.nomor}
-            className="hover:border-teal-300S group flex flex-row justify-between rounded-md border-[1px] border-slate-400 bg-slate-700 p-4 duration-200 hover:cursor-pointer hover:border-teal-300"
-          >
-            <div className="flex flex-row items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 group-hover:bg-teal-300">
-                <p className="font-bold group-hover:text-slate-900">
-                  {surah.nomor}
-                </p>
-              </div>
+        {surahs
+          .filter((surah) => surah.namaLatin.toLowerCase().includes(query))
+          .map((surah, _index) => (
+            <Link
+              href={`/${surah.nomor}`}
+              key={surah.nomor}
+              className="hover:border-teal-300S group flex flex-row justify-between rounded-md border-[1px] border-slate-400 bg-slate-700 p-4 duration-200 hover:cursor-pointer hover:border-teal-300"
+            >
+              <div className="flex flex-row items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 group-hover:bg-teal-300">
+                  <p className="font-bold group-hover:text-slate-900">
+                    {surah.nomor}
+                  </p>
+                </div>
 
-              <div>
-                <p className="font-semibold">{surah.namaLatin}</p>
+                <div>
+                  <p className="font-semibold">{surah.namaLatin}</p>
+                  <p className="text-sm text-slate-400 group-hover:text-teal-300">
+                    {surah.arti}
+                  </p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p>{surah.nama}</p>
                 <p className="text-sm text-slate-400 group-hover:text-teal-300">
-                  {surah.arti}
+                  {surah.jumlahAyat} ayat
                 </p>
               </div>
-            </div>
-            <div className="text-right">
-              <p>{surah.nama}</p>
-              <p className="text-sm text-slate-400 group-hover:text-teal-300">
-                {surah.jumlahAyat} ayat
-              </p>
-            </div>
-          </Link>
-        ))}
+            </Link>
+          ))}
       </div>
     </div>
   );