Merge pull request #352 from EducationalTools/334-more-gmae-metadata

add more metadata

Author: ingoau

package.json

@@ -33,7 +33,7 @@
 		"svelte-check": "^4.2.1",
 		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^3.2.0",
-		"tailwind-variants": "^1.0.0",
+		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.8.3",

pnpm-lock.yaml

@@ -5,6 +5,8 @@
 	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
 	import { Drawer } from 'vaul-svelte';
 	import { toast } from 'svelte-sonner';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { badgeVariants } from '$lib/components/ui/badge/index.js';
 
 	// Icons
 	import Refresh from 'lucide-svelte/icons/refresh-cw';
@@ -13,11 +15,13 @@
 	import Share from 'lucide-svelte/icons/share';
 	import Bookmark from 'lucide-svelte/icons/bookmark';
 	import Comment from 'lucide-svelte/icons/message-square';
+	import ArrowRight from 'lucide-svelte/icons/arrow-right';
 
 	// App imports
 	import { getGameById } from '$lib/gmaes';
 	import { preferencesStore, favoritesStore, historyStore } from '$lib/stores';
 	import { onMount } from 'svelte';
+	import clsx from 'clsx';
 
 	function openNewTab(url: string) {
 		url = location.origin + url;
@@ -60,8 +64,21 @@
 	<iframe src={gmaedata?.url} frameborder="0" class="flex-grow rounded" title={gmaedata?.name}
 	></iframe>
 
-	<div class="flex h-full w-72 flex-col">
+	<div class="flex h-full w-72 flex-col gap-2">
+		<a href="/" class={clsx(badgeVariants({ variant: 'secondary' }), 'w-fit')}
+			>{gmaedata?.category}<ArrowRight class="ml-1 size-3" /></a
+		>
 		<h1 class="text-4xl font-bold">{gmaedata?.name}</h1>
+		<div class="flex w-full flex-row flex-wrap gap-2">
+			{#each gmaedata?.tags || [] as tag}
+				<Badge variant="default">#{tag}</Badge>
+			{/each}
+			{#each gmaedata?.links || [] as link}
+				<a href={link.url} target="_blank" class={badgeVariants({ variant: 'outline' })}>
+					<OpenInNewTab class="mr-1 size-3" />{link.name}
+				</a>
+			{/each}
+		</div>
 		<p class="text-xl">{gmaedata?.description}</p>
 		<div class="flex-grow"></div>
 		<div class="flex flex-col gap-3">

src/lib/components/play.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		base: 'focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+				destructive:
+					'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent',
+				outline: 'text-foreground'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';