import { CheckCircle, DownloadCloud01, Mail01 } from "@untitledui/icons";
import { HTMLAttributes } from "react";
import { cx } from "@/components/utils";
import { Input } from "@/components/shared/input";
import { Button } from "@/components/button";
export const InlineCTAImage = () => {
return (
<div className="flex w-full max-w-3xl flex-col overflow-hidden rounded-xl bg-white shadow-sm sm:flex-row">
<div className="relative h-50 w-full sm:h-auto sm:w-60">
<img src="https://untitledui.com/images/portraits/person-06" className="absolute inset-0 size-full object-cover" />
</div>
<div className="flex-1 rounded-r-xl border border-t-0 border-gray-200 px-4 py-5 sm:border-l-0 sm:border-t sm:p-6">
<div className="flex flex-col">
<h3 className="text-lg font-semibold text-primary">We've just released a new update!</h3>
<p className="text-sm mt-1 text-gray-600">Check out the all new dashboard view. Pages and now load faster.</p>
<div className="mt-5 flex flex-col gap-3 sm:flex-row">
<Button color="secondary" size="md">
Dismiss
</Button>
<Button size="md">Changelog</Button>
</div>
</div>
</div>
</div>
);
};
InlineCTAImage.parameters = {
design: {
desktop: "https://www.figma.com/design/L92jnmHjGtn5xl0FoHYhG0?node-id=1255-131888",
mobile: "https://www.figma.com/design/L92jnmHjGtn5xl0FoHYhG0?node-id=1255-132370",
},
};