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={{
-        backgroundImage: `url(${image})`,
-        backgroundSize: "cover",
-        //background: "#2B2930",
-      }}
+      style={backgroundStyle}
       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>
             );
           })}