feat(subscribe): Improve layout and styling in subscription components

This commit is contained in:
web@ppanel 2025-01-08 00:42:58 +07:00
parent 6d0d069ce7
commit 5766376590
4 changed files with 4 additions and 4 deletions

View File

@ -50,7 +50,7 @@ export function ProductShowcase() {
>
{t('product_showcase_description')}
</motion.p>
<div className='mx-auto flex flex-wrap justify-center gap-8 overflow-x-auto overflow-y-hidden'>
<div className='mx-auto flex flex-wrap justify-center gap-8 overflow-x-auto overflow-y-hidden *:max-w-80 *:flex-auto'>
{data?.map((item, index) => (
<motion.div
key={item.id}

View File

@ -18,7 +18,7 @@ export function SubscribeDetail({ subscribe }: Readonly<SubscribeDetailProps>) {
return (
<>
<div className='font-semibold'>{t('productDetail')}</div>
<ul className='grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
<ul className='grid grid-cols-1 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
{subscribe?.name && (
<li className='flex items-center justify-between'>
<span className='text-muted-foreground line-clamp-2 flex-1'>{subscribe?.name}</span>

View File

@ -125,7 +125,7 @@ export default function Purchase({ subscribe, setSubscribe }: Readonly<PurchaseP
</CardContent>
</Card>
<div className='flex flex-col justify-between text-sm'>
<div className='grid gap-3'>
<div className='mb-6 grid gap-3'>
<DurationSelector
quantity={params.quantity!}
unitTime={subscribe?.unit_time}

View File

@ -131,7 +131,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
</CardContent>
</Card>
<div className='flex flex-col justify-between text-sm'>
<div className='grid gap-3'>
<div className='mb-6 grid gap-3'>
<DurationSelector
quantity={params.quantity!}
unitTime={subscribe?.unit_time}