mirror of
https://github.com/lukevella/rallly.git
synced 2025-08-02 07:58:57 +02:00
💄 Update upgrade button
This commit is contained in:
parent
61e0281f39
commit
ba9119526c
1 changed files with 20 additions and 14 deletions
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { usePostHog } from "@rallly/posthog/client";
|
||||
import { cn } from "@rallly/ui";
|
||||
import { Badge } from "@rallly/ui/badge";
|
||||
import { Button } from "@rallly/ui/button";
|
||||
import { DialogTrigger } from "@rallly/ui/dialog";
|
||||
import { Icon } from "@rallly/ui/icon";
|
||||
|
@ -22,7 +23,6 @@ import { usePathname } from "next/navigation";
|
|||
|
||||
import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
|
||||
import { PayWallDialog } from "@/components/pay-wall-dialog";
|
||||
import { ProBadge } from "@/components/pro-badge";
|
||||
import { Trans } from "@/components/trans";
|
||||
import { IfGuest, useUser } from "@/components/user-provider";
|
||||
import { IfFreeUser } from "@/contexts/plan";
|
||||
|
@ -108,24 +108,30 @@ export function Sidebar() {
|
|||
<li>
|
||||
<PayWallDialog>
|
||||
<DialogTrigger
|
||||
className="mb-4 flex w-full flex-col rounded-md border bg-gray-50 px-4 py-3 text-left focus:border-gray-300 focus:bg-gray-200"
|
||||
className="relative mb-4 flex w-full items-center gap-4 overflow-hidden rounded-md border bg-gray-50/50 px-4 py-3 text-left shadow-sm ring-gray-200 transition-transform hover:bg-gray-50 focus:border-gray-300 active:translate-y-1 active:shadow-sm"
|
||||
onClick={() =>
|
||||
posthog?.capture("trigger paywall", { from: "sidebar" })
|
||||
}
|
||||
>
|
||||
<span className="mb-2 flex items-center gap-x-2">
|
||||
<SparklesIcon className="size-5 text-gray-400" />
|
||||
<span className="text-sm font-bold">
|
||||
<SparklesIcon className="absolute -left-2 -top-2 size-20 text-gray-500/10" />
|
||||
<div>
|
||||
<div className="inline-flex size-12 items-center justify-center rounded-md">
|
||||
<Badge variant="primary">
|
||||
<Trans i18nKey="planPro" />
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold">
|
||||
<Trans i18nKey="upgrade" />
|
||||
</span>
|
||||
<ProBadge />
|
||||
</span>
|
||||
<span className="text-sm leading-relaxed text-gray-500">
|
||||
<Trans
|
||||
i18nKey="unlockFeatures"
|
||||
defaults="Unlock all Pro features."
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm leading-relaxed text-gray-500">
|
||||
<Trans
|
||||
i18nKey="unlockFeatures"
|
||||
defaults="Unlock all Pro features."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
</PayWallDialog>
|
||||
</li>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue