import React from "react" import { Head, Link } from "@inertiajs/react" import AppLayout from "@/layouts/app-layout" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft, Edit, Facebook, Instagram, Linkedin } from "lucide-react" import type { BreadcrumbItem } from "@/types" import { Badge } from "@/components/ui/badge" import { Staff } from "@/types/admin/Staff" import { edit, index } from "@/routes/admin/staff" interface Props { staff: Staff } export default function Show({ staff }: Props) { const breadcrumbs: BreadcrumbItem[] = [ { title: "Staff Members", href: index().url }, { title: "View Item", href: "#" }, ] return (
{/* Header Actions */}

{staff.full_name || "Staff Member"}

{staff.is_active ? 'Active' : 'Inactive'} • {staff.department}
{/* Content Grid */}
{/* Main Details */} Details

Title

{staff.full_name || "-"}

Phone

{staff.phone || "-"}

Email

{staff.email || "-"}

Sort Order

{staff.sort_order}

Social Links

Description

{staff.bio ? (

) : (

No description provided.

)}
{/* Sidebar / Meta Info */}
Metadata

Staff Image

 Staff Details
Department {staff.department}
Designation {staff.designation}
) }