feat: add solat jumaat & qiblat certified label

farhan-helmy · Aug 20, 2023 · 5fe7da8 · 5fe7da8
1 parent 4b5efd2
commit 5fe7da8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/src/components/SurauList.tsx b/src/components/SurauList.tsx
@@ -2,6 +2,7 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { api } from "../utils/api";
+import Badge from "./shared/Badge";
 
 const SurauList = ({
   type,
@@ -118,9 +119,17 @@ const SurauList = ({
                   )}
                 </div>
                 {/* <h3 className="mt-4 text-sm text-gray-700">{surau.location}</h3> */}
-                <p className="mt-1 truncate text-start text-lg font-medium text-gray-900">
-                  {surau.name}
-                </p>
+                <div className="mt-1 flex justify-between">
+                  <p className="truncate text-start text-lg font-medium text-gray-900">
+                    {surau.name}
+                  </p>
+                </div>
+                <div className="mt-1 flex flex-wrap gap-1">
+                  {surau?.is_solat_jumaat && <Badge text="Solat Jumaat" />}
+                  {surau?.is_qiblat_certified && (
+                    <Badge text="Qiblat Certified" />
+                  )}
+                </div>
               </a>
             ))
           )}

diff --git a/src/components/SurauReview.tsx b/src/components/SurauReview.tsx
@@ -15,6 +15,7 @@ import SurauOverview from "./SurauOverview";
 import Header from "./shared/Header";
 import Modal from "./shared/Modal";
 import SignIn from "./shared/SignIn";
+import Badge from "./shared/Badge";
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
@@ -165,10 +166,9 @@ const SurauReview = () => {
 
             <div className="mt-2 flex flex-row space-x-2">
               {surau.data?.is_solat_jumaat && (
-                <h3 className="font-base inline-flex items-center rounded-full bg-green-100 px-3 py-1.5 text-sm text-green-800">
-                  Solat Jumaat
-                </h3>
+                <Badge text="Solat Jumaat" />
               )}
+              {surau.data?.is_qiblat_certified && <Badge text="Qiblat Certified" />}
             </div>
             <div className="mt-2">
               <h3 className="text-lg font-medium text-gray-900">Direction</h3>

diff --git a/src/components/shared/Badge.tsx b/src/components/shared/Badge.tsx
@@ -0,0 +1,15 @@
+import type { FC } from "react";
+
+interface BadgeProps {
+  text: string;
+}
+
+const Badge: FC<BadgeProps> = ({ text }) => {
+  return (
+    <h3 className="font-base inline-flex items-center rounded-full bg-green-100 px-3 py-1.5 text-sm text-green-800">
+      {text}
+    </h3>
+  );
+};
+
+export default Badge;
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
@@ -14,6 +14,7 @@ import StateSelect from "../components/shared/StateSelect";
 import useSurauStore from "../store/surau";
 import { truncateName } from "../utils";
 import { api } from "../utils/api";
+import Badge from "../components/shared/Badge";
 
 const surauUnorderedListVariants = {
   open: {
@@ -122,6 +123,12 @@ const SurauList = () => {
                   <p className="text-xs font-light">
                     {surau.district.name}, {surau.state.name}
                   </p>
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {surau?.is_solat_jumaat && <Badge text="Solat Jumaat" />}
+                    {surau?.is_qiblat_certified && (
+                      <Badge text="Qiblat Certified" />
+                    )}
+                  </div>
                 </div>
                 <div className="max-h-12 overflow-hidden rounded-xl bg-gray-200 object-fill">
                   {surau.images[0]?.file_path ? (