-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add price * chore: update skeletons
- Loading branch information
Showing
12 changed files
with
310 additions
and
127 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
src/app/(main)/dashboard/_components/post-card-skeleton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardFooter, | ||
| CardHeader, | ||
| } from "@/components/ui/card"; | ||
| import { Skeleton } from "@/components/ui/skeleton"; | ||
|
|
||
| export function PostCardSkeleton() { | ||
| return ( | ||
| <Card> | ||
| <CardHeader> | ||
| <Skeleton className="h-7 w-24" /> | ||
| <Skeleton className="h-3 w-36" /> | ||
| </CardHeader> | ||
| <CardContent className="line-clamp-3 text-sm"> | ||
| <Skeleton className="h-5 w-24" /> | ||
| </CardContent> | ||
| <CardFooter className="justify-between gap-2"> | ||
| <Skeleton className="h-6 w-16" /> | ||
| <div className="flex items-center space-x-2"> | ||
| <Skeleton className="h-8 w-8" /> | ||
| <Skeleton className="h-8 w-12" /> | ||
| </div> | ||
| </CardFooter> | ||
| </Card> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { PostCardSkeleton } from "./post-card-skeleton"; | ||
|
|
||
| export function PostsSkeleton() { | ||
| return ( | ||
| <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> | ||
| {Array.from({ length: 3 }).map((_, i) => ( | ||
| <PostCardSkeleton key={i} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
src/app/(main)/dashboard/billing/_components/billing-skeleton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardFooter, | ||
| CardHeader, | ||
| } from "@/components/ui/card"; | ||
| import { Skeleton } from "@/components/ui/skeleton"; | ||
|
|
||
| export function BillingSkeleton() { | ||
| return ( | ||
| <> | ||
| <section> | ||
| <Card className="space-y-2 p-8"> | ||
| <Skeleton className="h-7 w-24" /> | ||
| <Skeleton className="h-5 w-36" /> | ||
| </Card> | ||
| </section> | ||
| <section className="grid gap-6 lg:grid-cols-2"> | ||
| {Array.from({ length: 2 }).map((_, i) => ( | ||
| <Card key={i} className="flex flex-col p-2"> | ||
| <CardHeader className="h-full"> | ||
| <Skeleton className="h-7 w-24" /> | ||
| <Skeleton className="h-4 w-36" /> | ||
| </CardHeader> | ||
| <CardContent className="h-full flex-1 space-y-6"> | ||
| <Skeleton className="h-8 w-24" /> | ||
| <div className="space-y-2"> | ||
| {Array.from({ length: 2 }).map((_, i) => ( | ||
| <div key={i} className="flex items-center gap-2"> | ||
| <Skeleton className="h-5 w-5 rounded-full" /> | ||
| <Skeleton className="h-4 w-24" /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter className="pt-4"> | ||
| <Skeleton className="h-10 w-full" /> | ||
| </CardFooter> | ||
| </Card> | ||
| ))} | ||
| </section> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import Link from "next/link"; | ||
|
|
||
| import { CheckIcon } from "@/components/icons"; | ||
|
|
||
| import { Button } from "@/components/ui/button"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
| import { formatDate } from "@/lib/utils"; | ||
| import { type RouterOutputs } from "@/trpc/shared"; | ||
| import { ManageSubscriptionForm } from "./manage-subscription-form"; | ||
|
|
||
| interface BillingProps { | ||
| stripePromises: Promise< | ||
| [RouterOutputs["stripe"]["getPlans"], RouterOutputs["stripe"]["getPlan"]] | ||
| >; | ||
| } | ||
|
|
||
| export async function Billing({ stripePromises }: BillingProps) { | ||
| const [plans, plan] = await stripePromises; | ||
|
|
||
| return ( | ||
| <> | ||
| <section> | ||
| <Card className="space-y-2 p-8"> | ||
| <h3 className="text-lg font-semibold sm:text-xl"> | ||
| {plan?.name ?? "Free"} plan | ||
| </h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| {!plan?.isPro | ||
| ? "The free plan is limited to 3 posts. Upgrade to the Pro plan to unlock unlimited posts." | ||
| : plan.isCanceled | ||
| ? "Your plan will be canceled on " | ||
| : "Your plan renews on "} | ||
| {plan?.stripeCurrentPeriodEnd | ||
| ? formatDate(plan.stripeCurrentPeriodEnd) | ||
| : null} | ||
| </p> | ||
| </Card> | ||
| </section> | ||
| <section className="grid gap-6 lg:grid-cols-2"> | ||
| {plans.map((item) => ( | ||
| <Card key={item.name} className="flex flex-col p-2"> | ||
| <CardHeader className="h-full"> | ||
| <CardTitle className="line-clamp-1">{item.name}</CardTitle> | ||
| <CardDescription className="line-clamp-2"> | ||
| {item.description} | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent className="h-full flex-1 space-y-6"> | ||
| <div className="text-3xl font-bold"> | ||
| {item.price} | ||
| <span className="text-sm font-normal text-muted-foreground"> | ||
| /month | ||
| </span> | ||
| </div> | ||
| <div className="space-y-2"> | ||
| {item.features.map((feature) => ( | ||
| <div key={feature} className="flex items-center gap-2"> | ||
| <div className="aspect-square shrink-0 rounded-full bg-foreground p-px text-background"> | ||
| <CheckIcon className="size-4" aria-hidden="true" /> | ||
| </div> | ||
| <span className="text-sm text-muted-foreground"> | ||
| {feature} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter className="pt-4"> | ||
| {item.name === "Free" ? ( | ||
| <Button className="w-full" asChild> | ||
| <Link href="/dashboard"> | ||
| Get started | ||
| <span className="sr-only">Get started</span> | ||
| </Link> | ||
| </Button> | ||
| ) : ( | ||
| <ManageSubscriptionForm | ||
| stripePriceId={item.stripePriceId} | ||
| isPro={plan?.isPro ?? false} | ||
| stripeCustomerId={plan?.stripeCustomerId} | ||
| stripeSubscriptionId={plan?.stripeSubscriptionId} | ||
| /> | ||
| )} | ||
| </CardFooter> | ||
| </Card> | ||
| ))} | ||
| </section> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.