UI component and styling guidelines using Shadcn UI, Radix UI, and Tailwind
next/image package for imagespnpm dlx shadcn@latest add COMPONENT
Example:
pnpm dlx shadcn@latest add progress
For API get requests to server use the swr package:
const searchParams = useSearchParams();
const page = searchParams.get("page") || "1";
const { data, isLoading, error } = useSWR<PlanHistoryResponse>(
`/api/user/planned/history?page=${page}`
);
Use the LoadingContent component to handle loading states:
<Card>
<LoadingContent loading={isLoading} error={error}>
{data && <MyComponent data={data} />}
</LoadingContent>
</Card>
<Input
type="email"
name="email"
label="Email"
registerProps={register("email", { required: true })}
error={errors.email}
/>
<Input
type="text"
autosizeTextarea
rows={3}
name="message"
placeholder="Paste in email content"
registerProps={register("message", { required: true })}
error={errors.message}
/>