Final touches in anime page

app/components/ui/hoverable-image/HoverableImage.vue

@@ -3,7 +3,7 @@ import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from "@/lib/utils";
 import type { ConfiguredImageProviders, ProviderDefaults } from '@nuxt/image';
 import type { HTMLAttributes } from 'vue';
-import { imageVariants } from '.';
+import { imageVariants, type HoverableImageVariants } from '.';
 
 interface Props {
     src: string;
@@ -20,8 +20,8 @@ interface Props {
     overlayOpacity?: number;
     overlayClass?: string;
     imageClass?: string;
-    variant?: 'default' | 'rounded' | 'elevated' | 'minimal';
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    variant?: HoverableImageVariants['variant'];
+    size?: HoverableImageVariants['size'];
 }
 
 const props = withDefaults(defineProps<Props>(), {

app/components/ui/hoverable-image/index.ts

@@ -14,6 +14,7 @@ export const imageVariants = cva(
                 minimal: "border-0",
             },
             size: {
+                xsm: "max-w-40",
                 sm: "max-w-xs",
                 md: "max-w-md",
                 lg: "max-w-lg",