init

2026-04-28 09:27:54 +07:00
commit 68d05da584
320 changed files with 26229 additions and 0 deletions
@@ -0,0 +1,126 @@
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import Avatar from "@/components/ui/avatar/Avatar";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Avatars | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Avatars page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+
+export default function AvatarPage() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Avatar" />
+      <div className="space-y-5 sm:space-y-6">
+        <ComponentCard title="Default Avatar">
+          {/* Default Avatar (No Status) */}
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar src="/images/user/user-01.jpg" size="xsmall" />
+            <Avatar src="/images/user/user-01.jpg" size="small" />
+            <Avatar src="/images/user/user-01.jpg" size="medium" />
+            <Avatar src="/images/user/user-01.jpg" size="large" />
+            <Avatar src="/images/user/user-01.jpg" size="xlarge" />
+            <Avatar src="/images/user/user-01.jpg" size="xxlarge" />
+          </div>
+        </ComponentCard>
+        <ComponentCard title="Avatar with online indicator">
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xsmall"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="small"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="medium"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="large"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xlarge"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xxlarge"
+              status="online"
+            />
+          </div>
+        </ComponentCard>
+        <ComponentCard title="Avatar with Offline indicator">
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xsmall"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="small"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="medium"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="large"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xlarge"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xxlarge"
+              status="offline"
+            />
+          </div>
+        </ComponentCard>{" "}
+        <ComponentCard title="Avatar with busy indicator">
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xsmall"
+              status="busy"
+            />
+            <Avatar src="/images/user/user-01.jpg" size="small" status="busy" />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="medium"
+              status="busy"
+            />
+            <Avatar src="/images/user/user-01.jpg" size="large" status="busy" />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xlarge"
+              status="busy"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xxlarge"
+              status="busy"
+            />
+          </div>
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}