complete awards page

2024-08-11 15:25:15 +03:30
parent 390442a331
commit 055a99c233
7 changed files with 117 additions and 1 deletions
@@ -0,0 +1,23 @@
+import { Calendar2, Cup } from "iconsax-react"
+import ProgressCircle from "./progress-circle"
+
+export const AwardNotComplete = () => {
+    return (
+        <div className="flex flex-col items-center gap-5 bg-auth-form rounded-[40px] w-full h-full relative p-[18px]">
+            <div className="flex flex-row items-center justify-between w-full">
+                <div className="flex flex-row gap-x-[6px] items-center">
+                    <p className="font-normal text-lg text-primary-text-color">75</p>
+                    <Cup className="size-4" color="#11212D" />
+                </div>
+                <ProgressCircle percentage={75} />
+            </div>
+            <div className="flex flex-col items-start gap-3">
+                <p className="font-normal text-base text-primary-text-color" style={{ fontFamily: "vazirmatn" }}>۲۵۰ هزار تومان تخفیف برای اقامت در تمام ویلاها و کلبه های جاجیگا با حداقل رزرو ۲ میلیون تومان</p>
+                <div className="flex flex-row items-center gap-2">
+                    <p className="font-normal text-sm text-secondary-text-color">1403/06/12</p>
+                    <Calendar2 color="#777577" className="size-5" />
+                </div>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,22 @@
+import { Cup, Transmit } from "iconsax-react"
+
+
+export const AwardComplete = () => {
+    return (
+        <div className="flex flex-col gap-10 bg-auth-form p-[18px] rounded-[40px]">
+            <div className="flex flex-col gap-3">
+                <p className="font-normal text-lg text-secondary-text-color">۲۵۰ هزار تومان تخفیف برای اقامت در تمام ویلاها و کلبه های جاجیگا با حداقل رزرو ۲ میلیون تومان.</p>
+                <p className="font-normal text-base text-secondary-text-color">1403/06/12</p>
+            </div>
+            <div className="flex flex-row justify-between items-center">
+                <div className="flex flex-row gap-x-[6px] items-center">
+                    <p className="font-normal text-lg text-secondary-text-color">75</p>
+                    <Cup className="size-4" color="#777577" />
+                </div>
+                <div className="size-10 flex items-center justify-center bg-white rounded-full cursor-pointer">
+                    <Transmit className="size-5" color="#777577" />
+                </div>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,17 @@
+import { AwardNotComplete } from "./award-not-complete"
+import { AwardComplete } from "./awards-complete"
+
+export const Awards = () => {
+    return (
+        <div className="flex flex-col gap-10">
+            <div className="flex flex-row justify-between items-center">
+                <p className="font-medium text-xl text-primary-text-color">جوایز (5)</p>
+                <p className="font-normal text-base text-primary-text-color">امتیازهای من: 65</p>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
+                <AwardNotComplete />
+                <AwardComplete />
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface ProgressCircleProps {
+    percentage: number;
+}
+
+export const ProgressCircle: React.FC<ProgressCircleProps> = ({ percentage }) => {
+    const radius = 45;
+    const stroke = 9;
+    const normalizedRadius = radius - stroke * 2;
+    const circumference = normalizedRadius * 2 * Math.PI;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+    return (
+        <svg height={radius * 2} width={radius * 2}>
+            <circle
+                stroke="#E6E8EA"
+                fill="transparent"
+                strokeWidth={stroke}
+                r={normalizedRadius}
+                cx={radius}
+                cy={radius}
+            />
+            <circle
+                stroke="#11212D"
+                fill="transparent"
+                strokeWidth={stroke}
+                r={normalizedRadius}
+                cx={radius}
+                cy={radius}
+                strokeDasharray={`${circumference} ${circumference}`}
+                style={{ strokeDashoffset }}
+                strokeLinecap="round"
+            />
+            <text x="50%" y="50%" textAnchor="middle" dy=".3em" className='text-base font-normal text-primary-text-color'>
+                {`${percentage}%`}
+            </text>
+        </svg>
+    );
+};
+
+export default ProgressCircle;