mirror of
https://github.com/lukevella/rallly.git
synced 2025-08-06 09:59:00 +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 { usePostHog } from "@rallly/posthog/client";
|
||||||
import { cn } from "@rallly/ui";
|
import { cn } from "@rallly/ui";
|
||||||
|
import { Badge } from "@rallly/ui/badge";
|
||||||
import { Button } from "@rallly/ui/button";
|
import { Button } from "@rallly/ui/button";
|
||||||
import { DialogTrigger } from "@rallly/ui/dialog";
|
import { DialogTrigger } from "@rallly/ui/dialog";
|
||||||
import { Icon } from "@rallly/ui/icon";
|
import { Icon } from "@rallly/ui/icon";
|
||||||
|
@ -22,7 +23,6 @@ import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
|
import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
|
||||||
import { PayWallDialog } from "@/components/pay-wall-dialog";
|
import { PayWallDialog } from "@/components/pay-wall-dialog";
|
||||||
import { ProBadge } from "@/components/pro-badge";
|
|
||||||
import { Trans } from "@/components/trans";
|
import { Trans } from "@/components/trans";
|
||||||
import { IfGuest, useUser } from "@/components/user-provider";
|
import { IfGuest, useUser } from "@/components/user-provider";
|
||||||
import { IfFreeUser } from "@/contexts/plan";
|
import { IfFreeUser } from "@/contexts/plan";
|
||||||
|
@ -108,24 +108,30 @@ export function Sidebar() {
|
||||||
<li>
|
<li>
|
||||||
<PayWallDialog>
|
<PayWallDialog>
|
||||||
<DialogTrigger
|
<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={() =>
|
onClick={() =>
|
||||||
posthog?.capture("trigger paywall", { from: "sidebar" })
|
posthog?.capture("trigger paywall", { from: "sidebar" })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span className="mb-2 flex items-center gap-x-2">
|
<SparklesIcon className="absolute -left-2 -top-2 size-20 text-gray-500/10" />
|
||||||
<SparklesIcon className="size-5 text-gray-400" />
|
<div>
|
||||||
<span className="text-sm font-bold">
|
<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" />
|
<Trans i18nKey="upgrade" />
|
||||||
</span>
|
</div>
|
||||||
<ProBadge />
|
<div className="text-sm leading-relaxed text-gray-500">
|
||||||
</span>
|
|
||||||
<span className="text-sm leading-relaxed text-gray-500">
|
|
||||||
<Trans
|
<Trans
|
||||||
i18nKey="unlockFeatures"
|
i18nKey="unlockFeatures"
|
||||||
defaults="Unlock all Pro features."
|
defaults="Unlock all Pro features."
|
||||||
/>
|
/>
|
||||||
</span>
|
</div>
|
||||||
|
</div>
|
||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
</PayWallDialog>
|
</PayWallDialog>
|
||||||
</li>
|
</li>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue