feat: use animated emojis from fluent

components/Card.tsx

@@ -2,16 +2,28 @@ import { isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
 
 export function Card(
-  { link, title, image }: { link?: string; title?: string; image?: string },
+  { link, title, image, backgroundSize = 100 }: {
+    backgroundSize?: number;
+    link?: string;
+    title?: string;
+    image?: string;
+  },
 ) {
+  const backgroundStyle = {
+    backgroundImage: `url(${image})`,
+    backgroundSize: "cover",
+  };
+
+  if (backgroundSize !== 100) {
+    backgroundStyle["backgroundSize"] = `${backgroundSize}%`;
+    backgroundStyle["backgroundRepeat"] = "no-repeat";
+    backgroundStyle["backgroundPosition"] = "center";
+  }
+
   return (
     <a
       href={link}
-      style={{
+      style={backgroundStyle}
-        backgroundImage: `url(${image})`,
-        backgroundSize: "cover",
-        //background: "#2B2930",
-      }}
       class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48

components/Emoji.tsx

@@ -0,0 +1,14 @@
+import { asset } from "$fresh/runtime.ts";
+
+export const Emoji = (props: { class?: string; name: string }) => {
+  return props.name
+    ? props.name.endsWith(".png")
+      ? (
+        <img
+          class={`${props?.class || ""}`}
+          src={asset(`/emojis/${props.name}`)}
+        />
+      )
+      : <span>{props.name}</span>
+    : <></>;
+};

components/layouts/main.tsx

@@ -4,6 +4,7 @@ import { CSS, KATEX_CSS } from "https://deno.land/x/gfm@0.2.5/mod.ts";
 import { Head } from "$fresh/runtime.ts";
 import Search, { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { Emoji } from "@components/Emoji.tsx";
 
 export type Props = {
   children: ComponentChildren;
@@ -34,11 +35,11 @@ export const MainLayout = ({ children, url, title, context }: Props) => {
             return (
               <a
                 href={m.link}
-                class={`block ${
+                class={`flex items-center gap-2  ${
                   m.link === url.pathname ? "bg-white text-black" : "text-white"
                 } p-3 text-xl w-full rounded-2xl`}
               >
-                {m.emoji} {m.name}
+                {<Emoji class="w-6 h-6" name={m.emoji} />} {m.name}
               </a>
             );
           })}

islands/Search.tsx

@@ -10,6 +10,7 @@ import Checkbox from "@components/Checkbox.tsx";
 import { Rating } from "@components/Rating.tsx";
 import { useSignal } from "@preact/signals";
 import Image from "@components/Image.tsx";
+import { Emoji } from "@components/Emoji.tsx";
 
 export const RedirectSearchHandler = () => {
   useEventListener("keydown", (e: KeyboardEvent) => {
@@ -53,8 +54,11 @@ export const SearchResultItem = (
       href={href}
       class="p-2 text-white flex gap-4 items-center rounded-2xl hover:bg-gray-700"
     >
+      {showEmoji && resourceType
+        ? <Emoji class="w-7 h-7" name={resourceType.emoji} />
+        : ""}
       {doc?.image && <SearchResultImage src={doc.image} />}
-      {`${showEmoji && resourceType ? resourceType.emoji : ""}`} {doc?.name}
+      {doc?.name}
     </a>
   );
 };
@@ -179,7 +183,7 @@ const Search = (
             class="flex items-center gap-2 p-2 my-4 mx-3"
             style={{ color: "#818181" }}
           >
-            <IconGhost class="animate-hover" />
+            <Emoji class="w-8 h-8" name="Ghost.png" />
             No Results
           </div>
         )}

lib/resources.ts

@@ -1,30 +1,30 @@
 export const resources = {
   "home": {
-    emoji: "🏡",
+    emoji: "House with Garden.png",
     name: "Home",
     link: "/",
     prefix: "",
   },
   "recipe": {
-    emoji: "🍽️",
+    emoji: "Fork and Knife with Plate.png",
     name: "Recipes",
     link: "/recipes",
     prefix: "Recipes/",
   },
   "movie": {
-    emoji: "🍿",
+    emoji: "Popcorn.png",
     name: "Movies",
     link: "/movies",
     prefix: "Media/movies/",
   },
   "article": {
-    emoji: "📝",
+    emoji: "Writing Hand Medium-Light Skin Tone.png",
     name: "Articles",
     link: "/articles",
     prefix: "Media/articles/",
   },
   "series": {
-    emoji: "📺",
+    emoji: "Television.png",
     name: "Series",
     link: "/series",
     prefix: "Media/series/",

routes/index.tsx

@@ -19,8 +19,13 @@ export default function Home(props: PageProps) {
           {Object.values(resources).map((m) => {
             return (
               <Card
-                title={`${m.emoji} ${m.name}`}
+                title={`${m.name}`}
-                image="/placeholder.svg"
+                backgroundSize={80}
+                image={`${
+                  m.emoji.endsWith(".png")
+                    ? `/emojis/${encodeURIComponent(m.emoji)}`
+                    : "/placeholder.svg"
+                }`}
                 link={m.link}
               />
             );