Merge pull request #98 from FakhrulRadziCode/consistent-image-size-an…

…d-ui-improve #77 Consistent image size and UI improve
farhan-helmy · Aug 26, 2023 · d001a60 · d001a60
2 parents 1b75b0f + 7a82a7c
commit d001a60
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 12 deletions.
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -67,12 +67,35 @@ const SearchBar = () => {
   return (
     <>
       <div onClick={() => redirectToSearchPage()} className="w-full">
-        <div>
-          <input
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-5">
+            <svg
+              className="h-4 w-4 text-gray-500 dark:text-gray-400"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 20 20"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+              />
+            </svg>
+          </div>
+          {/* <input
             type="text"
             placeholder="Search for a Surau"
             className="mt-8 w-full rounded-md border border-transparent bg-white py-3 px-2  text-base font-medium text-gray-900 hover:bg-gray-100"
             onChange={(e) => setSurauInput(e.target.value)}
+          /> */}
+          <input
+            type="search"
+            className="mt-8 block w-full rounded-full border border-transparent bg-white hover:bg-gray-100 p-3 pl-12 text-base focus:border-gray-500"
+            placeholder="Search for a Surau"
+            onChange={(e) => setSurauInput(e.target.value)}
           />
         </div>
         {surauInput.length > 0 ? <SearchBarResult input={surauInput} /> : null}

diff --git a/src/components/SurauList.tsx b/src/components/SurauList.tsx
@@ -78,9 +78,9 @@ const SurauList = ({
             <div>Error: {latestAddedSurau.error.message}</div>
           ) : (
             latestAddedSurau.data?.map((surau) => (
-              <a key={surau.id} href="#" className="group">
+              <a key={surau.id} href="#" className="flex flex-col group">
                 <div
-                  className="max-h-72 overflow-hidden rounded-xl bg-gray-200 object-fill"
+                  className="h-full overflow-hidden rounded-xl bg-gray-200 object-fill"
                   onClick={(e) => handleRouterPush(e, surau.unique_name)}
                 >
                   {surau.images.some((image) => image.is_thumbnail) ? (

diff --git a/src/components/SurauOverview.tsx b/src/components/SurauOverview.tsx
@@ -38,9 +38,23 @@ const SurauOverview: FC<SurauOverviewProps> = ({ surau }) => {
     <>
       <div className="mb-4 flex flex-col">
         <button
-          className="text-left text-indigo-500 underline"
+          className="text-left text-indigo-500 hover:underline flex items-center gap-2 pb-2"
           onClick={() => void router.push("/")}
         >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="h-4 w-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+            />
+          </svg>
           Go back
         </button>
         <div className="mb-2 text-left text-2xl">
@@ -70,9 +84,7 @@ const SurauOverview: FC<SurauOverviewProps> = ({ surau }) => {
                   priority
                   placeholder="blur"
                   blurDataURL="/assets/background/carisuraudefault.png"
-                  onClick={() =>
-                    handleImageClick(imageHighlighted)
-                  }
+                  onClick={() => handleImageClick(imageHighlighted)}
                 />
               ) : null}
             </div>

diff --git a/src/components/SurauReview.tsx b/src/components/SurauReview.tsx
@@ -156,7 +156,7 @@ const SurauReview = () => {
           <Header />
         </div>
 
-        <div className="py-18 mx-auto max-w-2xl px-4 sm:py-24 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+        <div className="py-18 mx-auto max-w-2xl px-4 sm:pb-24 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-x-8 lg:px-8">
           <div className="lg:col-span-4">
             {surau.data ? (
               <SurauOverview surau={surau.data} />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -155,7 +155,7 @@ export default function Index() {
             <p className="z-0 mt-2 text-xs font-extralight italic text-white md:text-lg">
               Can`t find your Surau?{" "}
               <span
-                className="cursor-pointer font-bold underline hover:underline"
+                className="cursor-pointer font-bold hover:underline"
                 onClick={() => handleSetOpenSurauForm()}
               >
                 Add here

diff --git a/src/pages/search.tsx b/src/pages/search.tsx
@@ -73,7 +73,21 @@ const Filter = () => {
           ) : null}
 
           <div className="flex items-end justify-end gap-4">
-            <button onClick={redirectToHomePage} className="text-xs underline">
+            <button onClick={redirectToHomePage} className="text-xs underline flex gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="h-4 w-4"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+                />
+              </svg>
               Go back
             </button>
           </div>
@@ -124,7 +138,9 @@ const SurauList = () => {
                     {surau.district.name}, {surau.state.name}
                   </p>
                   <div className="mt-2 flex flex-wrap gap-1">
-                    {surau?.is_solat_jumaat && <Badge color="green" text="Solat Jumaat" />}
+                    {surau?.is_solat_jumaat ? (
+                      <Badge color="green" text="Solat Jumaat" />
+                    ) : null}
                     {surau?.is_qiblat_certified && (
                       <Badge color="purple" text="Qiblat Certified" />
                     )}