From 7390c631d52325b2b15295f8622a0d2b25819477 Mon Sep 17 00:00:00 2001 From: bivashy Date: Sun, 18 Jan 2026 00:46:32 +0500 Subject: [PATCH] Basic implementation for anime page --- app/components/ui/badge/Badge.vue | 21 +- app/components/ui/badge/index.ts | 39 +-- app/components/ui/card/Card.vue | 22 ++ app/components/ui/card/CardAction.vue | 17 ++ app/components/ui/card/CardContent.vue | 17 ++ app/components/ui/card/CardDescription.vue | 17 ++ app/components/ui/card/CardFooter.vue | 17 ++ app/components/ui/card/CardHeader.vue | 17 ++ app/components/ui/card/CardTitle.vue | 17 ++ app/components/ui/card/index.ts | 7 + .../ui/hoverable-image/HoverableImage.vue | 82 ++++++ app/components/ui/hoverable-image/index.ts | 31 ++ app/components/ui/internal/MediaImageCard.vue | 76 ++--- .../ui/internal/SkeletonMediaImageCard.vue | 2 +- app/components/ui/tabs/Tabs.vue | 24 ++ app/components/ui/tabs/TabsContent.vue | 21 ++ app/components/ui/tabs/TabsList.vue | 24 ++ app/components/ui/tabs/TabsTrigger.vue | 26 ++ app/components/ui/tabs/index.ts | 4 + app/components/ui/tooltip/TooltipContent.vue | 7 +- app/components/ui/tooltip/index.ts | 45 +++ app/layouts/default.vue | 2 +- app/pages/anime/[id].vue | 197 +++++++++++++ app/pages/index.vue | 276 ++++++++++++------ public/example/hackguposter.jpg | Bin 0 -> 122893 bytes public/example/relation1.png | Bin 0 -> 105524 bytes public/example/relation2.jpg | Bin 0 -> 46263 bytes public/example/relation3.jpg | Bin 0 -> 37113 bytes public/example/relation4.jpg | Bin 0 -> 34449 bytes public/example/relation5.jpg | Bin 0 -> 18695 bytes public/example/relation6.jpg | Bin 0 -> 14646 bytes 31 files changed, 846 insertions(+), 162 deletions(-) create mode 100644 app/components/ui/card/Card.vue create mode 100644 app/components/ui/card/CardAction.vue create mode 100644 app/components/ui/card/CardContent.vue create mode 100644 app/components/ui/card/CardDescription.vue create mode 100644 app/components/ui/card/CardFooter.vue create mode 100644 app/components/ui/card/CardHeader.vue create mode 100644 app/components/ui/card/CardTitle.vue create mode 100644 app/components/ui/card/index.ts create mode 100644 app/components/ui/hoverable-image/HoverableImage.vue create mode 100644 app/components/ui/hoverable-image/index.ts create mode 100644 app/components/ui/tabs/Tabs.vue create mode 100644 app/components/ui/tabs/TabsContent.vue create mode 100644 app/components/ui/tabs/TabsList.vue create mode 100644 app/components/ui/tabs/TabsTrigger.vue create mode 100644 app/components/ui/tabs/index.ts create mode 100644 app/pages/anime/[id].vue create mode 100644 public/example/hackguposter.jpg create mode 100644 public/example/relation1.png create mode 100644 public/example/relation2.jpg create mode 100644 public/example/relation3.jpg create mode 100644 public/example/relation4.jpg create mode 100644 public/example/relation5.jpg create mode 100644 public/example/relation6.jpg diff --git a/app/components/ui/badge/Badge.vue b/app/components/ui/badge/Badge.vue index d894dfe..83f51d1 100644 --- a/app/components/ui/badge/Badge.vue +++ b/app/components/ui/badge/Badge.vue @@ -7,20 +7,19 @@ import { Primitive } from "reka-ui" import { cn } from "@/lib/utils" import { badgeVariants } from "." -const props = defineProps() +const props = withDefaults(defineProps(), { + size: "default" +}); const delegatedProps = reactiveOmit(props, "class") diff --git a/app/components/ui/badge/index.ts b/app/components/ui/badge/index.ts index bbc0dfa..b470f11 100644 --- a/app/components/ui/badge/index.ts +++ b/app/components/ui/badge/index.ts @@ -4,23 +4,28 @@ import { cva } from "class-variance-authority" export { default as Badge } from "./Badge.vue" export const badgeVariants = cva( - "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", - { - variants: { - variant: { - default: - "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", - secondary: - "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", - destructive: - "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", - outline: - "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", - }, + "inline-flex items-center justify-center rounded-full border text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + secondary: + "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + destructive: + "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + }, + size: { + default: "px-2 py-0.5", + xs: "px-1 py-0.2", + lg: "px-3 py-1" + } + }, + defaultVariants: { + variant: "default", + }, }, - defaultVariants: { - variant: "default", - }, - }, ) export type BadgeVariants = VariantProps diff --git a/app/components/ui/card/Card.vue b/app/components/ui/card/Card.vue new file mode 100644 index 0000000..f5a0707 --- /dev/null +++ b/app/components/ui/card/Card.vue @@ -0,0 +1,22 @@ + + + diff --git a/app/components/ui/card/CardAction.vue b/app/components/ui/card/CardAction.vue new file mode 100644 index 0000000..c91638b --- /dev/null +++ b/app/components/ui/card/CardAction.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/components/ui/card/CardContent.vue b/app/components/ui/card/CardContent.vue new file mode 100644 index 0000000..dfbc552 --- /dev/null +++ b/app/components/ui/card/CardContent.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/components/ui/card/CardDescription.vue b/app/components/ui/card/CardDescription.vue new file mode 100644 index 0000000..71c1b8d --- /dev/null +++ b/app/components/ui/card/CardDescription.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/components/ui/card/CardFooter.vue b/app/components/ui/card/CardFooter.vue new file mode 100644 index 0000000..9e3739e --- /dev/null +++ b/app/components/ui/card/CardFooter.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/components/ui/card/CardHeader.vue b/app/components/ui/card/CardHeader.vue new file mode 100644 index 0000000..4fe4da4 --- /dev/null +++ b/app/components/ui/card/CardHeader.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/components/ui/card/CardTitle.vue b/app/components/ui/card/CardTitle.vue new file mode 100644 index 0000000..5f479e7 --- /dev/null +++ b/app/components/ui/card/CardTitle.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/components/ui/card/index.ts b/app/components/ui/card/index.ts new file mode 100644 index 0000000..1627758 --- /dev/null +++ b/app/components/ui/card/index.ts @@ -0,0 +1,7 @@ +export { default as Card } from "./Card.vue" +export { default as CardAction } from "./CardAction.vue" +export { default as CardContent } from "./CardContent.vue" +export { default as CardDescription } from "./CardDescription.vue" +export { default as CardFooter } from "./CardFooter.vue" +export { default as CardHeader } from "./CardHeader.vue" +export { default as CardTitle } from "./CardTitle.vue" diff --git a/app/components/ui/hoverable-image/HoverableImage.vue b/app/components/ui/hoverable-image/HoverableImage.vue new file mode 100644 index 0000000..7100fa5 --- /dev/null +++ b/app/components/ui/hoverable-image/HoverableImage.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/app/components/ui/hoverable-image/index.ts b/app/components/ui/hoverable-image/index.ts new file mode 100644 index 0000000..ac0931c --- /dev/null +++ b/app/components/ui/hoverable-image/index.ts @@ -0,0 +1,31 @@ +import type { VariantProps } from "class-variance-authority" +import { cva } from "class-variance-authority" + +export { default as HoverableImage } from "./HoverableImage.vue" + +export const imageVariants = cva( + "relative group cursor-pointer overflow-hidden rounded-lg", + { + variants: { + variant: { + default: "border border-border", + rounded: "rounded-full overflow-hidden", + elevated: "shadow-lg hover:shadow-xl", + minimal: "border-0", + }, + size: { + sm: "max-w-xs", + md: "max-w-md", + lg: "max-w-lg", + xl: "max-w-xl", + full: "w-full", + } + }, + defaultVariants: { + variant: "default", + size: "md", + }, + } +) + +export type HoverableImageVariants = VariantProps diff --git a/app/components/ui/internal/MediaImageCard.vue b/app/components/ui/internal/MediaImageCard.vue index 2c9d6d5..2803354 100644 --- a/app/components/ui/internal/MediaImageCard.vue +++ b/app/components/ui/internal/MediaImageCard.vue @@ -17,10 +17,11 @@ watch(palette, () => { }); interface Props { + id: number; image_url: string; image_alt?: string; title: string; - type: 'anime' | 'manga' | 'character' | 'voice_actor'; + type: string; subtitle?: string; description?: string; @@ -46,45 +47,46 @@ const props = defineProps();