From 9f82779456fd2cde45a78716dd03b4d49fcd28d4 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 9 Mar 2025 12:00:10 +0800
Subject: [PATCH] refactor: adjust spacing in CarouselSection and
 CategorySection for improved layout

---
 app/components/ui/carousel-section.tsx | 2 +-
 app/components/ui/category-section.tsx | 2 +-
 app/components/ui/tags.tsx             | 4 +---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index 506f868..a4cbcdb 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -84,7 +84,7 @@ export const CarouselSection = (properties: TNews) => {
                 className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
                 key={index}
               >
-                <div className="flex flex-col justify-between">
+                <div className="flex flex-col justify-between gap-3">
                   <img
                     className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
                     src={featured}
diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx
index 3afaae1..97a2c00 100644
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@@ -54,7 +54,7 @@ export const CategorySection = (properties: TNews) => {
           ) => (
             <div
               key={index}
-              className={twMerge('grid sm:gap-x-8')}
+              className={twMerge('grid gap-3 sm:gap-x-8')}
             >
               <img
                 className={twMerge(
diff --git a/app/components/ui/tags.tsx b/app/components/ui/tags.tsx
index a08f88d..f41face 100644
--- a/app/components/ui/tags.tsx
+++ b/app/components/ui/tags.tsx
@@ -11,9 +11,7 @@ type TProperties = {
 export const Tags = (properties: TProperties) => {
   const { tags, is_premium, className } = properties
   return (
-    <div
-      className={twMerge('my-3 flex gap-2 uppercase max-sm:text-sm', className)}
-    >
+    <div className={twMerge('flex gap-2 uppercase max-sm:text-sm', className)}>
       {tags?.map((tag) => (
         <span
           key={tag.id}