150 lines
4.7 KiB
TypeScript
150 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Eye, Pencil, Trash2, Filter } from "lucide-react";
|
|
|
|
export default function ApproverContentWebsite() {
|
|
const tabs = [
|
|
"Hero Section",
|
|
"About Us",
|
|
"Our Products",
|
|
"Our Services",
|
|
"Technology Partners",
|
|
"Pop Up",
|
|
];
|
|
|
|
const data = [
|
|
{
|
|
title: "Beyond Expectations to Build Reputation.",
|
|
subtitle: "-",
|
|
author: "John Kontributor",
|
|
status: "Published",
|
|
date: "2024-01-15",
|
|
},
|
|
{
|
|
title: "Manajemen Reputasi untuk Institusi",
|
|
subtitle: "-",
|
|
author: "Sarah Kontributor",
|
|
status: "Pending",
|
|
date: "2024-01-14",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* HEADER */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-800">Content Website</h1>
|
|
<p className="text-slate-500">
|
|
Update homepage content, products, services, and partners
|
|
</p>
|
|
</div>
|
|
|
|
{/* TABS */}
|
|
<div className="bg-white rounded-2xl shadow border p-2 flex flex-wrap gap-2">
|
|
{tabs.map((tab, i) => (
|
|
<button
|
|
key={i}
|
|
className={`px-4 py-2 rounded-xl text-sm font-medium transition ${
|
|
i === 0
|
|
? "bg-blue-600 text-white"
|
|
: "hover:bg-slate-100 text-slate-600"
|
|
}`}
|
|
>
|
|
{tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* SEARCH & FILTER */}
|
|
<div className="flex gap-4">
|
|
<Input placeholder="Search Hero Section by title, author, or content..." />
|
|
<Button variant="outline" className="flex items-center gap-2">
|
|
<Filter size={16} /> Filters
|
|
</Button>
|
|
</div>
|
|
|
|
{/* TABLE */}
|
|
<div className="bg-white rounded-2xl shadow border overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-50 text-slate-600">
|
|
<tr>
|
|
<th className="text-left px-6 py-4">Main Title</th>
|
|
<th className="text-left px-6 py-4">Subtitle</th>
|
|
<th className="text-left px-6 py-4">Author</th>
|
|
<th className="text-left px-6 py-4">Status</th>
|
|
<th className="text-left px-6 py-4">Date</th>
|
|
<th className="text-left px-6 py-4">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{data.map((item, i) => (
|
|
<tr key={i} className="border-t hover:bg-slate-50 transition">
|
|
<td className="px-6 py-4 font-medium text-slate-800">
|
|
{item.title}
|
|
</td>
|
|
|
|
<td className="px-6 py-4">{item.subtitle}</td>
|
|
|
|
<td className="px-6 py-4 text-slate-600">{item.author}</td>
|
|
|
|
<td className="px-6 py-4">
|
|
<span
|
|
className={`text-xs font-medium px-3 py-1 rounded-full ${
|
|
item.status === "Published"
|
|
? "bg-green-100 text-green-600"
|
|
: "bg-yellow-100 text-yellow-600"
|
|
}`}
|
|
>
|
|
{item.status}
|
|
</span>
|
|
</td>
|
|
|
|
<td className="px-6 py-4 text-slate-600">{item.date}</td>
|
|
|
|
<td className="px-6 py-4">
|
|
<div className="flex gap-3 text-slate-500">
|
|
<Eye
|
|
size={18}
|
|
className="cursor-pointer hover:text-blue-600"
|
|
/>
|
|
<Pencil
|
|
size={18}
|
|
className="cursor-pointer hover:text-green-600"
|
|
/>
|
|
<Trash2
|
|
size={18}
|
|
className="cursor-pointer hover:text-red-600"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* FOOTER */}
|
|
<div className="flex justify-between items-center px-6 py-4 border-t bg-slate-50">
|
|
<p className="text-sm text-slate-500">Showing 1 to 2 of 2 items</p>
|
|
|
|
<div className="flex gap-2">
|
|
<button className="px-4 py-2 border rounded-lg text-sm">
|
|
Previous
|
|
</button>
|
|
<button className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">
|
|
1
|
|
</button>
|
|
<button className="px-4 py-2 border rounded-lg text-sm">2</button>
|
|
<button className="px-4 py-2 border rounded-lg text-sm">3</button>
|
|
<button className="px-4 py-2 border rounded-lg text-sm">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|