From e488d9534f6de034693cd20859f70b236af2b6ee Mon Sep 17 00:00:00 2001
From: "@milesibastos" <antonio@milesibastos.com>
Date: Wed, 12 Mar 2025 11:48:50 -0300
Subject: [PATCH] feat: refactor UpdateCard component to use reactive styles
 for title, subtitle, and description based on image presence

---
 .../components/UpdateCard/UpdateCard.svelte   | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/UpdateCard/UpdateCard.svelte b/src/lib/components/UpdateCard/UpdateCard.svelte
index 63fa5868..cdabaf26 100644
--- a/src/lib/components/UpdateCard/UpdateCard.svelte
+++ b/src/lib/components/UpdateCard/UpdateCard.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+    import { date as formatDate } from "svelte-i18n";
+    import type { ButtonEventHandler } from "bits-ui";
+
     import * as Card from "$lib/components/ui/card";
     import { Button } from "$lib/components/ui/button";
-    import type { ButtonEventHandler } from "bits-ui";
-    import { date as formatDate } from "svelte-i18n";
 
     export let image: string | undefined = undefined;
     export let date: Date;
@@ -10,9 +11,11 @@
     export let subtitle: string;
     export let description: string;
 
-    let titleStyles = image ? "text-3xl" : "text-6xl";
-    let subtitleStyles = image ? "text-base" : "text-3xl";
-    let descriptionStyles = image ? "line-clamp-2" : "line-clamp-4";
+    $: styles = {
+        title: image ? "text-3xl" : "text-6xl",
+        subtitle: image ? "text-base" : "text-3xl",
+        description: image ? "line-clamp-2" : "line-clamp-4",
+    };
 
     function action(e: ButtonEventHandler<MouseEvent>): void {
         throw new Error("Function not implemented.");
@@ -25,11 +28,11 @@
         {#if image}
             <img src={image} alt="Reward" class="h-64 w-full rounded-3xl object-cover" />
         {/if}
-        <Card.Title tag="h1" class={`${titleStyles} font-bold`}>{title}</Card.Title>
+        <Card.Title tag="h1" class={`${styles.title} font-bold`}>{title}</Card.Title>
     </Card.Header>
     <Card.Content class="space-y-2">
-        <h2 class={`${subtitleStyles} font-medium`}>{subtitle}</h2>
-        <p class={`${descriptionStyles}`}>{description}</p>
+        <h2 class={`${styles.subtitle} font-medium`}>{subtitle}</h2>
+        <p class={`${styles.description}`}>{description}</p>
     </Card.Content>
     <Card.Footer class="mt-auto justify-end">
         <Button variant="outline" size="lg" class="" on:click={action}>Seguir leyendo</Button>