fix: image sizing, ui

src/components/SearchBar.tsx

@@ -32,7 +32,7 @@ const SearchBar = () => {
 
     return (
         <>
-        <div className="w-full absolute mt-36 p-4">
+        <div className="w-full absolute mt-24 p-4">
 
             <div>
                 <input

src/components/SurauList.tsx

@@ -2,10 +2,13 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { api } from "../utils/api";
+import { useRef } from "react";
 
 const SurauList = ({ type }: { type: "new" | "recent" }) => {
   const latestAddedSurau = api.surau.getLatestAddedSurau.useQuery();
+
   const router = useRouter();
+  console.log(latestAddedSurau.data);
 
   const handleRouterPush = (e: React.FormEvent, surauName: string) => {
     e.preventDefault();
@@ -54,8 +57,8 @@ const SurauList = ({ type }: { type: "new" | "recent" }) => {
   }
 
   return (
-    <div className="bg-white">
-      <div className="mx-auto max-w-2xl py-16 px-4 sm:py-4 sm:px-6 lg:max-w-7xl lg:px-8">
+    <div className="bg-white ">
+      <div className="mx-auto shadow-lg max-w-2xl py-2 px-4 sm:py-4 sm:px-6 lg:max-w-7xl lg:px-8">
         <h2 className="sr-only">Surau</h2>
 
         <div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 xl:gap-x-8">
@@ -67,15 +70,15 @@ const SurauList = ({ type }: { type: "new" | "recent" }) => {
             latestAddedSurau.data?.map((surau) => (
               <a key={surau.id} href="#" className="group">
                 <div
-                  className=" w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-1 xl:aspect-h-1"
+                  className="max-h-72 overflow-hidden object-fill rounded-xl bg-gray-200"
                   onClick={(e) => handleRouterPush(e, surau.unique_name)}
                 >
                   {surau.images[0]?.file_path ? (
                     <Image
                       src={surau.images[0]?.file_path}
                       alt={surau.images[0].id}
                       className="h-full w-full object-fill object-center group-hover:opacity-75"
-                      width={500}
+                      width={200}
                       height={200}
                     />
                   ) : (
@@ -84,7 +87,7 @@ const SurauList = ({ type }: { type: "new" | "recent" }) => {
                         src="/assets/background/carisuraudefault.png"
                         alt="default"
                         className="h-full w-full object-fill object-center group-hover:opacity-75"
-                        width={500}
+                        width={200}
                         height={200}
                       />
                     </>

src/components/SurauOverview.tsx

@@ -1,35 +1,42 @@
-import type { SurauPhoto } from "@prisma/client"
-import Image from "next/image"
-import { useRouter } from "next/router"
-import type { FC } from "react"
-import { capitalizeFirstLetter } from "../utils"
-import { useEffect, useState } from "react"
+import type { SurauPhoto } from "@prisma/client";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import type { FC } from "react";
+import { capitalizeFirstLetter } from "../utils";
+import { useEffect, useState } from "react";
 
 type Surau = {
-  id: string
-  name: string
-  images: SurauPhoto[]
-}
+  id: string;
+  name: string;
+  images: SurauPhoto[];
+};
 
 type SurauOverviewProps = {
-  surau?: Surau | null
-}
+  surau?: Surau | null;
+};
 
 const SurauOverview: FC<SurauOverviewProps> = ({ surau }) => {
-  const router = useRouter()
-  const [imageHighlighted, setImageHighlighted] = useState<SurauPhoto | null | undefined>(null)
+  const router = useRouter();
+  const [imageHighlighted, setImageHighlighted] = useState<
+    SurauPhoto | null | undefined
+  >(null);
 
   useEffect(() => {
     if (surau?.images.length) {
-      setImageHighlighted(surau.images[0])
+      setImageHighlighted(surau.images[0]);
     }
-  }, [surau])
+  }, [surau]);
 
   return (
     <>
-      <div className="flex flex-col mb-4">
-        <button className="text-left underline text-indigo-500" onClick={() => void router.push("/")}>Go back</button>
-        <div className="text-left text-2xl mb-2">
+      <div className="mb-4 flex flex-col">
+        <button
+          className="text-left text-indigo-500 underline"
+          onClick={() => void router.push("/")}
+        >
+          Go back
+        </button>
+        <div className="mb-2 text-left text-2xl">
           {capitalizeFirstLetter(surau?.name as string)}
         </div>
         {surau?.images.length === 0 ? (
@@ -41,43 +48,45 @@ const SurauOverview: FC<SurauOverviewProps> = ({ surau }) => {
               height={300}
               priority
             />
-            <div className="italic text-gray-500">
-              No image
-            </div>
+            <div className="italic text-gray-500">No image</div>
           </div>
         ) : (
           <>
-            <Image
-              className="rounded-lg"
-              src={imageHighlighted?.file_path as string}
-              alt=""
-              width={500}
-              height={300}
-              priority
-              placeholder="blur"
-              blurDataURL="/assets/background/carisuraudefault.png"
-            />
-            <div className="space-x-2 flex items-center justify-center overflow-auto mt-2">
+            <div className="max-h-72 overflow-hidden rounded-xl bg-gray-200 object-fill">
+              <Image
+                src={imageHighlighted?.file_path as string}
+                alt=""
+                className="h-full w-full rounded-lg object-fill object-center group-hover:opacity-75"
+                width={200}
+                height={200}
+                priority
+                placeholder="blur"
+                blurDataURL="/assets/background/carisuraudefault.png"
+              />
+            </div>
+            <div className="mt-2 overflow-hidden flex items-center justify-center space-x-2">
               {surau?.images.map((image) => (
+                <div key={image.id} className="max-h-24 overflow-hidden rounded-xl bg-gray-200 object-fill">
                 <Image
                   key={image.id}
-                  className="rounded-lg h-auto w-auto"
                   src={image.file_path}
                   alt={image.id}
+                  className="h-full w-full rounded-lg object-fill object-center group-hover:opacity-75"
                   width={100}
                   height={100}
                   onClick={() => setImageHighlighted(image)}
                   placeholder="blur"
                   blurDataURL="/assets/background/carisuraudefault.png"
                   priority
                 />
+                </div>
               ))}
             </div>
           </>
         )}
       </div>
     </>
-  )
-}
+  );
+};
 
-export default SurauOverview
+export default SurauOverview;

src/pages/index.tsx

@@ -186,7 +186,7 @@ export default function Index() {
             </nav>
           </header>
 
-          <div className="relative mx-auto flex max-w-3xl flex-col items-center py-32 px-6 text-center sm:py-64 lg:px-0">
+          <div className="relative mx-auto flex max-w-3xl flex-col items-center py-20 px-6 text-center sm:py-64 lg:px-0">
             <h1 className="text-4xl font-bold tracking-tight text-white lg:text-6xl">
               Carisurau.com
             </h1>
@@ -213,7 +213,7 @@ export default function Index() {
           {/* Category section */}
           <section
             aria-labelledby="category-heading"
-            className="pt-12 sm:pt-12 xl:mx-auto xl:max-w-7xl xl:px-8"
+            className="pt-4 sm:pt-12 xl:mx-auto xl:max-w-7xl xl:px-8"
           >
             <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
               <h2

src/pages/search/index.tsx

@@ -0,0 +1,12 @@
+import type { NextPage } from "next";
+
+const SearchPage: NextPage = () => {
+
+    return (
+        <>
+         Search Page
+        </>
+    )
+}
+
+export default SearchPage;