feat: update <ConferenceTicket> styles

frontChapter · Jan 28, 2024 · a95dc95 · a95dc95
1 parent 524ffb2
commit a95dc95
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 44 deletions.
diff --git a/src/app/components/ConferenceTicket/ConferenceTicket.tsx b/src/app/components/ConferenceTicket/ConferenceTicket.tsx
@@ -58,6 +58,7 @@ export default function ConferenceLocation() {
             ]}
           />
           <TicketPlanCard
+            vip
             title={{
               text: "ثبت نام VIP",
               icon: <RiVipDiamondFill className="size-9 fill-orange-200" />,
@@ -124,6 +125,7 @@ export default function ConferenceLocation() {
             ]}
           />
           <TicketPlanCard
+            soldOut
             title={{
               text: "ثبت نام زودهنگام",
               icon: <RiTimeLine className="size-9 fill-zinc-200" />,

diff --git a/src/app/components/ConferenceTicket/TicketPlanCard.tsx b/src/app/components/ConferenceTicket/TicketPlanCard.tsx
@@ -1,8 +1,11 @@
 import { cn } from "@/utils/styles";
+import Link from "next/link";
 import { ReactNode } from "react";
 
-interface IProps {
+interface TicketPlanCardProps {
   price: string;
+  vip?: boolean;
+  soldOut?: boolean;
   title: {
     text: string;
     icon: ReactNode;
@@ -13,53 +16,62 @@ interface IProps {
   }[];
 }
 
-const TicketPlanCard = (props: IProps) => {
-  const isVip = props.title.text === "ثبت نام VIP";
-  const isSoldout = props.title.text === "ثبت نام زودهنگام";
-
+const TicketPlanCard = (props: TicketPlanCardProps) => {
   return (
-    <div
-      className={cn(
-        `flex h-fit w-full flex-col gap-4 rounded-xl border-2 border-zinc-700 py-4 lg:min-h-96 ${
-          isVip && "border-orange-500"
-        }`,
-      )}
+    <Link
+      href="#?"
+      target="_blank"
+      className={cn({
+        "pointer-events-none": props.soldOut,
+      })}
     >
-      {/* title */}
-      <div className="mt-1 flex flex-col items-center gap-2">
-        {props.title.icon}
-        <p className="text-2xl">{props.title.text}</p>
-      </div>
-      {/* price */}
-      <div className={cn(`bg-zinc-500/30 py-6 ${isVip && "bg-orange-500/30"}`)}>
-        <p
-          className={cn(
-            `text-center text-3xl font-bold ${isVip && "text-orange-500"} ${
-              isSoldout && "text-red-500 line-through"
-            }`,
-          )}
+      <div
+        className={cn(
+          "group flex h-fit w-full flex-col gap-4 rounded-xl border-2 border-zinc-700 py-4 transition-colors hover:border-orange-500 lg:min-h-96",
+          {
+            "border-orange-500": props.vip,
+          },
+        )}
+      >
+        {/* title */}
+        <div className="mt-1 flex flex-col items-center gap-2">
+          {props.title.icon}
+          <p className="text-2xl">{props.title.text}</p>
+        </div>
+        {/* price */}
+        <div
+          className={cn("bg-zinc-500/30 py-6", {
+            "bg-orange-500/30": props.vip,
+          })}
         >
-          {props.price}
-        </p>
+          <p
+            className={cn("text-center text-3xl font-bold", {
+              "text-orange-500": props.vip,
+              "text-red-500 line-through": props.soldOut,
+            })}
+          >
+            {props.price}
+          </p>
+        </div>
+        {/* advantages */}
+        <ul className="mx-11 flex flex-col">
+          {props.advantages.map((item, index) => {
+            return (
+              <li
+                key={index}
+                className={cn(
+                  `list-disc marker:text-xl marker:text-green-500 ${
+                    item.makerColor === "orange" && "marker:text-orange-500"
+                  }`,
+                )}
+              >
+                <span>{item.text}</span>
+              </li>
+            );
+          })}
+        </ul>
       </div>
-      {/* advantages */}
-      <ul className="mx-11 flex flex-col">
-        {props.advantages.map((item, index) => {
-          return (
-            <li
-              key={index}
-              className={cn(
-                `list-disc marker:text-xl marker:text-green-500 ${
-                  item.makerColor === "orange" && "marker:text-orange-500"
-                }`,
-              )}
-            >
-              <span>{item.text}</span>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+    </Link>
   );
 };