Support Links This component provides a clean and intuitive way to direct users to various support channels. It's built to be flexible, allowing you to easily configure the title, icon, and support items through props.
import { SupportLinks, SupportItem } from "@/components/ui/support"; // Adjust path as needed
// Sample data for the support links.
// Replace imageSrc with your actual asset URLs.
const supportItems: SupportItem[] = [
{
title: "Live chat",
href: "#",
imageSrc: "https://cdn.21st.dev/assets/mirror/d3/d3345fae3286f75822c8c86aa70f30dc87bd028b93ab333a6b0f445707ca009c.png",
},
{
title: "Help center",
href: "#",
imageSrc: "https://cdn.21st.dev/assets/mirror/1a/1a4fc4d0fac50e87bd49cc8e99d651e369b178358a6cdb0d0e16f25114882106.png",
},
{
title: "Blog",
href: "#",
imageSrc: "https://cdn.21st.dev/assets/mirror/df/df615e20945526ce000cd7ace6817b02bb55ef09f4117b6e8ab97c92618a443d.png",
},
];
/**
* A demo component to display the SupportLinks component.
*/
export default function SupportLinksDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center bg-background p-4">
<SupportLinks title="How can I get support?" items={supportItems} />
</div>
);
}