Components
A reusable component that shows an empty state.
Title: e.g., “No friends”
Description: e.g., “No data to show”
Optional icon: can be set via props, otherwise a default icon is shown.
Basically, it’s a small placeholder for when there’s no data.
Loading preview...
import { EmptyState } from "@/components/ui/empty-state-for-friends";
import { PlusIcon } from "lucide-react";
export default function DemoOne() {
const positions = [
"top-0 -left-3",
"top-0 -right-3",
"bottom-0 -left-3",
"bottom-0 -right-3",
];
return (
<main className="w-full flex justify-center py-1">
<section className="relative max-w-xl border p-2 flex flex-col w-full">
<h2 className="capitalize text-2xl text-center font-sans">
My Friends List</h2>
<hr className="border-b border-dashed my-2" />
<div className="absolute -z-10 inset-0">
{positions.map((pos, index) => (
<section key={index} className={`absolute ${pos}`}>
<PlusIcon />
</section>
))}
</div>
<div className="grid p-2 grid-cols-1 sm:grid-cols-2" >
<EmptyState title={"No Friend"} />
</div>
</section>
</main>
);
}