Archived
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { Subscription, getSubscriptionDetails } from './Subscription';
|
|
|
|
interface MembershipItemProps {
|
|
subscription: Subscription;
|
|
}
|
|
|
|
const MembershipItem: React.FC<MembershipItemProps> = ({ subscription }) => {
|
|
const { membership, daysLeft } = getSubscriptionDetails(subscription);
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 rounded-lg gap-5 p-4 place-content-between bg-overlay">
|
|
<div className="flex flex-row place-content-between">
|
|
<div className="flex flex-row gap-3">
|
|
<div className="w-10 h-10 rounded-md">
|
|
<Image
|
|
src={membership.image}
|
|
alt="User Icon"
|
|
width={40}
|
|
height={40}
|
|
className="w-full h-full rounded-md"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<p className="p text-outline2">{membership.title}</p>
|
|
<p className="opacity-50">kr {membership.priceYear} / year</p>
|
|
</div>
|
|
</div>
|
|
<p className="opacity-50">{daysLeft} days left</p>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col gap-5">
|
|
<div>
|
|
<p className="font-semibold">Perks</p>
|
|
{membership.perks.map((perk, index) => (
|
|
<p key={index} className="p">+ {perk}</p>
|
|
))}
|
|
</div>
|
|
<div>
|
|
{membership.specialPerks.map((perk, index) => (
|
|
<p key={index} className="p">+ {perk}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MembershipItem;
|