admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Change the design of subscription page.

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-13 14:51:17 +05:30
parent a309d13247
commit e10a6ff14c
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Home/SubscriptionPlans.jsx
View File

@ -9,6 +9,7 @@ const SubscriptionPlans = () => {
const [frequency, setFrequency] = useState(1); const [frequency, setFrequency] = useState(1);
const { data, isLoading, isError, error } = useSubscription(frequency); const { data, isLoading, isError, error } = useSubscription(frequency);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [isOpen, setIsOpen] = useState(true);
console.log(data); console.log(data);
const frequencyLabel = (freq) => { const frequencyLabel = (freq) => {
switch (freq) { switch (freq) {
@ -63,7 +64,7 @@ const SubscriptionPlans = () => {
<p>{error.name}</p> <p>{error.name}</p>
</div> </div>
) : ( ) : (
data.map((plan) => ( data.map((plan, index) => (
<div key={plan.id} className="col-xl-4 col-lg-6 col-md-6"> <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
<div className="card h-100 shadow-lg border-0 p-3 text-center p-10"> <div className="card h-100 shadow-lg border-0 p-3 text-center p-10">
{/* Header */} {/* Header */}
@ -109,6 +110,7 @@ const SubscriptionPlans = () => {
.map(([key, mod]) => { .map(([key, mod]) => {
if (!mod || !mod.name) return null; if (!mod || !mod.name) return null;
const isFirst = index === 0;
return ( return (
<div className="accordion-item mb-2" key={`${plan.id}-${mod.id}`}> <div className="accordion-item mb-2" key={`${plan.id}-${mod.id}`}>
@ -118,7 +120,7 @@ const SubscriptionPlans = () => {
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target={`#collapse-${plan.id}-${mod.id}`} data-bs-target={`#collapse-${plan.id}-${mod.id}`}
aria-expanded="true" aria-expanded={`${isFirst ? "true" : "false"}`}
aria-controls={`collapse-${plan.id}-${mod.id}`} aria-controls={`collapse-${plan.id}-${mod.id}`}
> >
<span className="fw-semibold d-flex align-items-center"> <span className="fw-semibold d-flex align-items-center">
@ -136,7 +138,7 @@ const SubscriptionPlans = () => {
<div <div
id={`collapse-${plan.id}-${mod.id}`} id={`collapse-${plan.id}-${mod.id}`}
className="accordion-collapse collapse show" className={`accordion-collapse collapse ${isFirst ? "show" : ""}`}
aria-labelledby={`heading-${plan.id}-${mod.id}`} aria-labelledby={`heading-${plan.id}-${mod.id}`}
> >
<div className="accordion-body py-2"> <div className="accordion-body py-2">
@ -164,8 +166,6 @@ const SubscriptionPlans = () => {
})} })}
</div> </div>
{/* Button */} {/* Button */}
<div className="mt-auto"> <div className="mt-auto">
<Link <Link
@ -183,6 +183,7 @@ const SubscriptionPlans = () => {
</div> </div>
</div> </div>
</div> </div>
)) ))
)} )}
</div> </div>