Archived
added supabase
This commit is contained in:
Austin
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { createClient } from "@/utils/supabase/client";
|
||||
|
||||
interface AdminSidebarProps {
|
||||
role: string;
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ label: "Dashboard", href: "/admin", minRole: "editor" },
|
||||
{ label: "Posts", href: "/admin/posts", minRole: "editor" },
|
||||
{ label: "Comments", href: "/admin/comments", minRole: "editor" },
|
||||
{ label: "Subscriptions", href: "/admin/subscriptions", minRole: "admin" },
|
||||
{ label: "Authors", href: "/admin/authors", minRole: "admin" },
|
||||
{ label: "Admin Users", href: "/admin/users", minRole: "super_admin" },
|
||||
];
|
||||
|
||||
const roleHierarchy: Record<string, number> = {
|
||||
editor: 1,
|
||||
admin: 2,
|
||||
super_admin: 3,
|
||||
};
|
||||
|
||||
export default function AdminSidebar({ role }: AdminSidebarProps) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const supabase = createClient();
|
||||
|
||||
const handleLogout = async () => {
|
||||
await supabase.auth.signOut();
|
||||
router.push("/admin/login");
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
const userLevel = roleHierarchy[role] || 0;
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-gray-900 text-white min-h-screen flex flex-col">
|
||||
<div className="p-6 border-b border-gray-700">
|
||||
<Link href="/" className="text-lg font-bold">
|
||||
Confessions of Grace
|
||||
</Link>
|
||||
<p className="text-gray-400 text-sm mt-1">Admin Panel</p>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-4">
|
||||
<ul className="space-y-1">
|
||||
{navItems
|
||||
.filter((item) => userLevel >= (roleHierarchy[item.minRole] || 0))
|
||||
.map((item) => {
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/admin" && pathname.startsWith(item.href));
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`block px-4 py-2 rounded-md transition-colors ${
|
||||
isActive
|
||||
? "bg-gray-700 text-white"
|
||||
: "text-gray-300 hover:bg-gray-800 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-gray-700">
|
||||
<p className="text-gray-400 text-xs mb-2 capitalize">
|
||||
Role: {role.replace("_", " ")}
|
||||
</p>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white rounded-md transition-colors"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
interface DeleteConfirmDialogProps {
|
||||
title: string;
|
||||
message: string;
|
||||
onConfirm: () => Promise<void>;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DeleteConfirmDialog({
|
||||
title,
|
||||
message,
|
||||
onConfirm,
|
||||
children,
|
||||
}: DeleteConfirmDialogProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleConfirm = async () => {
|
||||
setLoading(true);
|
||||
await onConfirm();
|
||||
setLoading(false);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<span onClick={() => setOpen(true)}>{children}</span>
|
||||
{open && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full mx-4">
|
||||
<h3 className="text-lg font-bold mb-2">{title}</h3>
|
||||
<p className="text-gray-600 mb-6">{message}</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => setOpen(false)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Deleting..." : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
interface PostEditorProps {
|
||||
action: (formData: FormData) => Promise<void>;
|
||||
initialData?: {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
excerpt: string;
|
||||
content: string;
|
||||
author: string;
|
||||
tags: string[];
|
||||
coverImage?: string | null;
|
||||
published: boolean;
|
||||
};
|
||||
authors: { name: string }[];
|
||||
isEdit?: boolean;
|
||||
}
|
||||
|
||||
export default function PostEditor({
|
||||
action,
|
||||
initialData,
|
||||
authors,
|
||||
isEdit = false,
|
||||
}: PostEditorProps) {
|
||||
const [content, setContent] = useState(initialData?.content || "");
|
||||
const [published, setPublished] = useState(
|
||||
initialData?.published ?? false
|
||||
);
|
||||
|
||||
return (
|
||||
<form action={action} className="space-y-6">
|
||||
{/* Slug / ID */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Slug (URL ID)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="id"
|
||||
defaultValue={initialData?.id || ""}
|
||||
readOnly={isEdit}
|
||||
required
|
||||
placeholder="my-post-slug"
|
||||
className={`w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent ${isEdit ? "bg-gray-100" : ""}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
defaultValue={initialData?.title || ""}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
name="date"
|
||||
defaultValue={
|
||||
initialData?.date
|
||||
? new Date(initialData.date).toISOString().split("T")[0]
|
||||
: new Date().toISOString().split("T")[0]
|
||||
}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Author */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Author
|
||||
</label>
|
||||
<select
|
||||
name="author"
|
||||
defaultValue={initialData?.author || ""}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
>
|
||||
<option value="">Select an author</option>
|
||||
{authors.map((a) => (
|
||||
<option key={a.name} value={a.name}>
|
||||
{a.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Excerpt */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Excerpt
|
||||
</label>
|
||||
<textarea
|
||||
name="excerpt"
|
||||
rows={2}
|
||||
defaultValue={initialData?.excerpt || ""}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Tags (comma-separated)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="tags"
|
||||
defaultValue={initialData?.tags?.join(", ") || ""}
|
||||
placeholder="theology, books, personal life"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cover Image */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Cover Image URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="coverImage"
|
||||
defaultValue={initialData?.coverImage || ""}
|
||||
placeholder="/images/my-post.png"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content (Markdown) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Content (Markdown)
|
||||
</label>
|
||||
<textarea
|
||||
name="content"
|
||||
rows={20}
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Published Toggle */}
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="hidden"
|
||||
name="published"
|
||||
value={published ? "true" : "false"}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPublished(!published)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
published ? "bg-green-500" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
published ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-sm text-gray-700">
|
||||
{published ? "Published" : "Draft"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-accent text-white px-6 py-2 rounded-md hover:bg-accent-dark"
|
||||
>
|
||||
{isEdit ? "Update Post" : "Create Post"}
|
||||
</button>
|
||||
<a
|
||||
href="/admin/posts"
|
||||
className="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user