feat: add hero image to /search + download count to admin

Author: BassemHalim

client/public/hero.png

@@ -1,4 +1,5 @@
 import SearchComponent from "@/components/searchComponent";
+import HeroImage from "@/components/ui/HeroImage";
 import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
 
@@ -50,9 +51,12 @@ export default async function Search({
     const t = await getTranslations({ locale: "ar", namespace: "Home" });
     return (
         <Suspense fallback={<div>Loading...</div>}>
-            <h1 className="text-5xl font-bold text-white text-center m-2">
-                {t("title")}
-            </h1>
+            <HeroImage height="h-[300px] md:h-[400px] ">
+                <h1 className="text-5xl font-bold text-white text-center">
+                    {t("title")}
+                </h1>
+                <h2 className="text-2xl text-center">{t("hero")}</h2>
+            </HeroImage>
             <SearchComponent
                 key={[query, ...tags].join("-") || ""}
                 query={query}

client/public/hero_search.jpg

@@ -0,0 +1,30 @@
+import Image from "next/image";
+
+interface HeroImageProps {
+    children: React.ReactNode;
+    className?: string;
+    height?: string;
+}
+
+const HeroImage = ({ children, className = "", height = "h-[400px]" }: HeroImageProps) => {
+    return (
+        <section className={`relative ${height} w-full mb-6 shadow-md shadow-secondary ${className}`}>
+            <div className="absolute inset-0">
+                <Image
+                    fetchPriority="high"
+                    priority
+                    src="/hero.png"
+                    height={1080}
+                    width={1920}
+                    alt="egyptian memes collage"
+                    className="w-full h-full object-fill brightness-50"
+                />
+            </div>
+            <div className="relative h-full flex flex-col items-center justify-center px-4">
+                {children}
+            </div>
+        </section>
+    );
+};
+
+export default HeroImage;

client/public/restaurant.jpeg

@@ -1,8 +1,8 @@
+import { useRouter } from "@/i18n/navigation";
 import { Search } from "lucide-react";
 import { useTranslations } from "next-intl";
-import Image from "next/image";
-import { useRouter } from "@/i18n/navigation";
 import { FormEvent } from "react";
+import HeroImage from "./HeroImage";
 
 const HeroSearch = () => {
     const router = useRouter();
@@ -19,41 +19,26 @@ const HeroSearch = () => {
     }
     const t = useTranslations("Home");
     return (
-        <div>
-            <section className="relative h-[400px] w-full mb-6 shadow-md shadow-secondary">
-                <div className="absolute inset-0">
-                    <Image
-                        fetchPriority="high"
-                        priority
-                        src="/ali_rabi3.jpg"
-                        height={500}
-                        width={1000}
-                        alt="Ali Rabi3 meme"
-                        className="w-full h-full object-fill brightness-50"
+        <HeroImage>
+            <h1 className="text-5xl font-bold text-white text-center">
+                {t("title")}
+            </h1>
+            <h2 className="text-2xl mb-5 text-center">{t("hero")}</h2>
+            <div className="w-full max-w-2xl relative text-gray-800 ">
+                <form onSubmit={search}>
+                    <input
+                        required
+                        name="query"
+                        type="text"
+                        placeholder={t("meme-search")}
+                        className={`w-full px-6 py-4 rounded-lg text-lg shadow-lg pr-14 font-medium bg-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`}
                     />
-                </div>
-                <div className="relative h-full flex flex-col items-center justify-center px-4">
-                    <h1 className="text-5xl font-bold text-white text-center">
-                        {t("title")}
-                    </h1>
-                    <h2 className="text-2xl mb-5 text-center">{t("hero")}</h2>
-                    <div className="w-full max-w-2xl relative text-gray-800 ">
-                        <form onSubmit={search}>
-                            <input
-                                required
-                                name="query"
-                                type="text"
-                                placeholder={t("meme-search")}
-                                className={`w-full px-6 py-4 rounded-lg text-lg shadow-lg pr-14 font-medium bg-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`}
-                            />
-                            <button type="submit">
-                                <Search className="absolute right-4 top-0 mt-4 text-gray-400 h-6 w-6" />
-                            </button>
-                        </form>
-                    </div>
-                </div>
-            </section>
-        </div>
+                    <button type="submit">
+                        <Search className="absolute right-4 top-0 mt-4 text-gray-400 h-6 w-6" />
+                    </button>
+                </form>
+            </div>
+        </HeroImage>
     );
 };
 

client/src/app/[locale]/search/page.tsx

@@ -60,6 +60,10 @@ export default function Timeline({
                         >
                             <Edit />
                         </Button>
+                        <div className="flex gap-2 text-sm">
+                            <span>↓{data.download_count ?? 0}</span>
+                            <span>{data.share_count ?? 0}</span>
+                        </div>
                     </div>
                     <UpdateMeme
                         meme={data}