Components
Loading preview...
AuthorFormCard A responsive and theme-adaptive card component for creating or updating author profiles. It features an image upload area, input fields with tooltips, and integrated animations using framer-motion.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/author-form-cardimport { AuthorFormCard } from "@/components/ui/author-form-card";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogTrigger,
} from "@/components/ui/dialog";
import { Toaster, toast } from "sonner";
export default function AuthorFormCardDemo() {
const handleFormSubmit = (data: { name: string; title: string, imageUrl?: string }) => {
console.log("Form submitted:", data);
toast.success(`Author "${data.name}" has been saved!`);
// Here you would typically close the dialog and refresh data
};
const handleCancel = () => {
console.log("Form cancelled");
toast.info("Action was cancelled.");
};
// An example of initial data for an "edit" scenario
const existingAuthor = {
name: "Jane Doe",
title: "Lead Developer",
imageUrl: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-odeolBZIWJQnTXTfGgQL4zl9csbXnl.png&w=320&q=75", // Replace with your image src
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background">
<Dialog>
<DialogTrigger asChild>
<Button>Add New Writer</Button>
</DialogTrigger>
<DialogContent className="p-0 bg-transparent border-none shadow-none w-full max-w-lg">
{/* The `AuthorFormCard` is self-contained.
Pass the onSubmit and onCancel handlers as props.
*/}
<AuthorFormCard
onSubmit={handleFormSubmit}
onCancel={handleCancel}
// Uncomment the line below to see the "edit" state
// initialData={existingAuthor}
/>
</DialogContent>
</Dialog>
<Toaster position="top-right" richColors />
</div>
);
}