Workflow Builder Card A responsive and theme-adaptive card component designed to showcase AI workflows. It features a subtle hover animation that elegantly reveals additional details like a description and tags. The card is highly reusable, with its content, including images, user avatars, and action icons, managed through props.
import { Code, Share2, Zap } from "lucide-react";
import { WorkflowBuilderCard } from "@/components/ui/workflow-builder-card"; // Adjust the import path
export default function WorkflowBuilderCardDemo() {
const cardData = {
imageUrl: "https://cdn.21st.dev/assets/mirror/55/5577ac2ace2cc867746348f55cf84d6b0207b268f9f4f06cc34419970b4fd0f3.jpg",
status: "Active" as const,
lastUpdated: "5 days ago",
title: "Personal Email Assistant",
description: "Your AI helper for reading, organizing, and responding to emails.",
tags: ["Personal", "Marketing"],
users: [
{ src: "https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg", fallback: "U1" },
{ src: "https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg", fallback: "U2" },
{ src: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg", fallback: "U3" },
{ src: "https://cdn.21st.dev/assets/mirror/fa/fae47bb0faba45d1e0696b6557ca36c551a738c7d6e3950e82bb69dd2f963a72.jpg", fallback: "+3" },
],
actions: [
{ Icon: Zap, bgColor: "bg-blue-500" },
{ Icon: Code, bgColor: "bg-gray-700" },
{ Icon: Share2, bgColor: "bg-red-500" },
],
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<WorkflowBuilderCard {...cardData} />
</div>
);
}