refactor: adjust spacing in CarouselSection and CategorySection for improved layout

This commit is contained in:
Ardeman 2025-03-09 12:00:10 +08:00
parent ee816b8db7
commit 9f82779456
3 changed files with 3 additions and 5 deletions

View File

@ -84,7 +84,7 @@ export const CarouselSection = (properties: TNews) => {
className="embla__slide w-full min-w-0 flex-none sm:w-1/3" className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
key={index} key={index}
> >
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between gap-3">
<img <img
className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]" className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
src={featured} src={featured}

View File

@ -54,7 +54,7 @@ export const CategorySection = (properties: TNews) => {
) => ( ) => (
<div <div
key={index} key={index}
className={twMerge('grid sm:gap-x-8')} className={twMerge('grid gap-3 sm:gap-x-8')}
> >
<img <img
className={twMerge( className={twMerge(

View File

@ -11,9 +11,7 @@ type TProperties = {
export const Tags = (properties: TProperties) => { export const Tags = (properties: TProperties) => {
const { tags, is_premium, className } = properties const { tags, is_premium, className } = properties
return ( return (
<div <div className={twMerge('flex gap-2 uppercase max-sm:text-sm', className)}>
className={twMerge('my-3 flex gap-2 uppercase max-sm:text-sm', className)}
>
{tags?.map((tag) => ( {tags?.map((tag) => (
<span <span
key={tag.id} key={tag.id}