import React from "react";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { FaCircleCheck } from "react-icons/fa6";
import { currentUser } from "@clerk/nextjs/server";
import ProButton from "@/components/elements/ProButton/pro-button";
type Props = {};
export const Pricing = async (props: Props) => {
const user = await currentUser();
return (
<div>
<div className="flex flex-col space-y-6 items-center md:space-y-12">
<div className="grid grid-cols-1 md:grid-cols-2 justify-center gap-8 items-center
max-w-[50rem] mx-auto">
<Card
className={cn(
"h-[32.5rem] md:h-[37.5rem] flex flex-col relative overflow-hidden pt-4
items-start space-y-0 rounded-2xl"
)}
>
<CardHeader>
<CardTitle className="text-foreground/80 mb-3 md:mb-6 capitalize text-sm
md:text-base">
Starter
</CardTitle>
<h2 className="text-4xl md:text-5xl font-semibold pb-4">
Free
<span className="text-sm md:text-base lg:text-xl font-medium">
/month
</span>
</h2>
<div className="flex flex-col space-y-4">
<CardDescription className="text-black dark:text-white text-sm md:text-
base">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Doloribus, delectus excepturi! Dolorem, omnis dolor blanditiis
velit ipsum nam dolore? Unde.
</CardDescription>
<Link href="">
<ProButton />
</Link>
</div>
</CardHeader>
<CardContent>
<ul className="flex flex-col gap-2">
<li className="flex items-center capitalize text-sm md:text-base">
<FaCircleCheck className="mr-4 w-4 h-4 shrink-0" />
Lorem ipsum
</li>
<li className="flex items-center capitalize text-sm md:text-base">
<FaCircleCheck className="mr-4 w-4 h-4 shrink-0" />
Lorem ipsum
</li>
<li className="flex items-center capitalize text-sm md:text-base">
<FaCircleCheck className="mr-4 w-4 h-4 shrink-0" />
Lorem ipsum
</li>
</ul>
</CardContent>
</Card>
</div>
</div>
</div>
);
};
//pro-button.tsx
"use client";
import { Button } from "@/components/ui/button";
import { useProModal } from "@/hooks/use-pro-modal";
import { cn } from "@/lib/utils";
import React, { useState } from "react";
type Props = {};
const ProButton = (props: Props) => {
const [recommended, setRecommended] = useState(false);
const proModal = useProModal();
return (
<div>
<Button
variant={recommended ? "default": "outline"}
className={cn(
"w-full h-9",
recommended === true
? ""
: "border-2 border-black dark:border-white hover:border-muted
dark:hover:border-muted"
)}
onClick={proModal.onOpen}
>
Get started with Free
</Button>
</div>
);
};
export default ProButton;
//pro-modal.tsx
"use client";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useProModal } from "@/hooks/use-pro-modal";
export const ProModal = () => {
const proModal = useProModal();
return (
<Dialog open={proModal.isOpen} onOpenChange={proModal.onClose}>
<DialogContent>
<DialogHeader className="space-y-4">
<DialogTitle className="text-center">Upgrade to Pro+</DialogTitle>
</DialogHeader>
</DialogContent>
</Dialog>
);
};
I am currently developing a pricing page using Next.js and Clerk authentication. My goal is to redirect users when they click the "Get started with Free" button based on their authentication status - if authenticated, I want to open a pro-modal, and if not, send them to the sign-in page. However, I'm facing challenges in achieving this functionality. Additionally, maintaining async-await with client components in the same file complicates the task further. Any assistance or guidance on resolving this issue would be greatly appreciated. Thank you for your help.