or
or
{routes.map(({ name, href }) => (
{name}
))}
{props.logo}
Next.js Lucia Auth Starter Template
A Next.js Authentication starter template (password reset, email validation and oAuth). Includes Lucia, Drizzle, tRPC, Stripe, tailwindcss, shadcn-ui and react-email.
{Array.from({ length: 3 }).map((_, i) => (
);
}
================================================
FILE: src/app/(main)/dashboard/_components/posts.tsx
================================================
"use client";
import { type RouterOutputs } from "@/trpc/shared";
import * as React from "react";
import { NewPost } from "./new-post";
import { PostCard } from "./post-card";
interface PostsProps {
promises: Promise<[RouterOutputs["post"]["myPosts"], RouterOutputs["stripe"]["getPlan"]]>;
}
export function Posts({ promises }: PostsProps) {
/**
* use is a React Hook that lets you read the value of a resource like a Promise or context.
* @see https://react.dev/reference/react/use
*/
const [posts, subscriptionPlan] = React.use(promises);
/**
* useOptimistic is a React Hook that lets you show a different state while an async action is underway.
* It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request.
* @see https://react.dev/reference/react/useOptimistic
*/
const [optimisticPosts, setOptimisticPosts] = React.useOptimistic(
posts,
(
state,
{
action,
post,
}: {
action: "add" | "delete" | "update";
post: RouterOutputs["post"]["myPosts"][number];
},
) => {
switch (action) {
case "delete":
return state.filter((p) => p.id !== post.id);
case "update":
return state.map((p) => (p.id === post.id ? post : p));
default:
return [...state, post];
}
},
);
return (
{Array.from({ length: 2 }).map((_, i) => (
{plan?.name ?? "Free"} plan
{!plan?.isPro ? "The free plan is limited to 2 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}
{item.price}
/month
{item.features.map((feature) => (
{feature}
))}
Billing
Manage your billing and subscription
{children}
Posts
Manage your posts here
Settings
Manage your account settings
Work in progress...
{post.title}
{isFunctionType(props.children)
? props.children({ open, setOpen })
: props.children}
{body}
); }); FormMessage.displayName = "FormMessage"; export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, }; ================================================ FILE: src/components/ui/input.tsx ================================================ import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes