97 lines
5.2 KiB
TypeScript
97 lines
5.2 KiB
TypeScript
'use client';
|
|
import Dropdown from '@/components/dropdown';
|
|
import IconHorizontalDots from '@/components/icon/icon-horizontal-dots';
|
|
import { IRootState } from '@/store';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
const ComponentsUsersProfilePaymentHistory = () => {
|
|
const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';
|
|
|
|
return (
|
|
<div className="panel">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<h5 className="text-lg font-semibold dark:text-white-light">Payment History</h5>
|
|
</div>
|
|
<div>
|
|
<div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
|
|
<div className="flex items-center justify-between py-2">
|
|
<h6 className="font-semibold text-[#515365] dark:text-white-dark">
|
|
March
|
|
<span className="block text-white-dark dark:text-white-light">Pro Membership</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<p className="font-semibold">90%</p>
|
|
<div className="dropdown ltr:ml-4 rtl:mr-4">
|
|
<Dropdown
|
|
offset={[0, 5]}
|
|
placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
|
|
btnClassName="hover:text-primary"
|
|
button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}
|
|
>
|
|
<ul className="!min-w-[150px]">
|
|
<li>
|
|
<button type="button">View Invoice</button>
|
|
</li>
|
|
<li>
|
|
<button type="button">Download Invoice</button>
|
|
</li>
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
|
|
<div className="flex items-center justify-between py-2">
|
|
<h6 className="font-semibold text-[#515365] dark:text-white-dark">
|
|
February
|
|
<span className="block text-white-dark dark:text-white-light">Pro Membership</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<p className="font-semibold">90%</p>
|
|
<div className="dropdown ltr:ml-4 rtl:mr-4">
|
|
<Dropdown offset={[0, 5]} placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`} button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}>
|
|
<ul className="!min-w-[150px]">
|
|
<li>
|
|
<button type="button">View Invoice</button>
|
|
</li>
|
|
<li>
|
|
<button type="button">Download Invoice</button>
|
|
</li>
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between py-2">
|
|
<h6 className="font-semibold text-[#515365] dark:text-white-dark">
|
|
January
|
|
<span className="block text-white-dark dark:text-white-light">Pro Membership</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<p className="font-semibold">90%</p>
|
|
<div className="dropdown ltr:ml-4 rtl:mr-4">
|
|
<Dropdown offset={[0, 5]} placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`} button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}>
|
|
<ul className="!min-w-[150px]">
|
|
<li>
|
|
<button type="button">View Invoice</button>
|
|
</li>
|
|
<li>
|
|
<button type="button">Download Invoice</button>
|
|
</li>
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComponentsUsersProfilePaymentHistory;
|