mirror of
https://github.com/perfect-panel/ppanel-web.git
synced 2026-02-17 05:41:10 -05:00
✨ feat(subscribe): Improve layout and styling in subscription components
This commit is contained in:
parent
6d0d069ce7
commit
5766376590
@ -50,7 +50,7 @@ export function ProductShowcase() {
|
|||||||
>
|
>
|
||||||
{t('product_showcase_description')}
|
{t('product_showcase_description')}
|
||||||
</motion.p>
|
</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) => (
|
{data?.map((item, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={item.id}
|
key={item.id}
|
||||||
|
|||||||
@ -18,7 +18,7 @@ export function SubscribeDetail({ subscribe }: Readonly<SubscribeDetailProps>) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className='font-semibold'>{t('productDetail')}</div>
|
<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 && (
|
{subscribe?.name && (
|
||||||
<li className='flex items-center justify-between'>
|
<li className='flex items-center justify-between'>
|
||||||
<span className='text-muted-foreground line-clamp-2 flex-1'>{subscribe?.name}</span>
|
<span className='text-muted-foreground line-clamp-2 flex-1'>{subscribe?.name}</span>
|
||||||
|
|||||||
@ -125,7 +125,7 @@ export default function Purchase({ subscribe, setSubscribe }: Readonly<PurchaseP
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
<div className='flex flex-col justify-between text-sm'>
|
<div className='flex flex-col justify-between text-sm'>
|
||||||
<div className='grid gap-3'>
|
<div className='mb-6 grid gap-3'>
|
||||||
<DurationSelector
|
<DurationSelector
|
||||||
quantity={params.quantity!}
|
quantity={params.quantity!}
|
||||||
unitTime={subscribe?.unit_time}
|
unitTime={subscribe?.unit_time}
|
||||||
|
|||||||
@ -131,7 +131,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
<div className='flex flex-col justify-between text-sm'>
|
<div className='flex flex-col justify-between text-sm'>
|
||||||
<div className='grid gap-3'>
|
<div className='mb-6 grid gap-3'>
|
||||||
<DurationSelector
|
<DurationSelector
|
||||||
quantity={params.quantity!}
|
quantity={params.quantity!}
|
||||||
unitTime={subscribe?.unit_time}
|
unitTime={subscribe?.unit_time}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user