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