feat: add theme toggle to admin sidebars and update form list to use full-row navigation links
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useState, useTransition, useRef, useCallback, useEffect } from "react";
|
import React, { useState, useRef, useCallback, useEffect } from "react";
|
||||||
import { useRouter, usePathname } from "next/navigation";
|
import { useRouter, usePathname } from "next/navigation";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
@@ -33,10 +33,11 @@ import {
|
|||||||
SidebarHeader,
|
SidebarHeader,
|
||||||
SidebarFooter,
|
SidebarFooter,
|
||||||
} from "@/components/ui/sidebar";
|
} from "@/components/ui/sidebar";
|
||||||
import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Save, Image as ImageIcon, X, Check, LayoutDashboard, ClipboardList, ArrowLeft, Webhook } from "lucide-react";
|
import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Image as ImageIcon, X, Check, LayoutDashboard, ClipboardList, ArrowLeft, Webhook } from "lucide-react";
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { RichTextEditor } from "@/components/rich-text-editor";
|
import { RichTextEditor } from "@/components/rich-text-editor";
|
||||||
import { FormattedText } from "@/components/formatted-text";
|
import { FormattedText } from "@/components/formatted-text";
|
||||||
|
import { ThemeToggle } from "@/components/theme-toggle";
|
||||||
|
|
||||||
interface Question {
|
interface Question {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -613,10 +614,11 @@ export function AdminSidebar({ formId }: { formId: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Sidebar variant="sidebar" collapsible="icon">
|
<Sidebar variant="sidebar" collapsible="icon">
|
||||||
<SidebarHeader className="border-b border-border py-4 px-4 flex items-center justify-between">
|
<SidebarHeader className="border-b border-border py-4 px-4 flex flex-row items-center justify-between">
|
||||||
<span className="font-bold tracking-wider text-primary text-sm uppercase">
|
<span className="font-bold tracking-wider text-primary text-sm uppercase">
|
||||||
Form Admin
|
Form Admin
|
||||||
</span>
|
</span>
|
||||||
|
<ThemeToggle />
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
|
|
||||||
<SidebarContent>
|
<SidebarContent>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default async function AdminFormLayout(
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SidebarProvider>
|
<SidebarProvider>
|
||||||
<div className="flex w-full bg-background text-foreground dark">
|
<div className="flex w-full bg-background text-foreground">
|
||||||
<AdminSidebar formId={params.id} />
|
<AdminSidebar formId={params.id} />
|
||||||
<div className="flex-1 overflow-hidden">
|
<div className="flex-1 overflow-hidden">
|
||||||
<div className="md:hidden p-2">
|
<div className="md:hidden p-2">
|
||||||
|
|||||||
+19
-14
@@ -67,22 +67,27 @@ export default async function AdminFormsPage() {
|
|||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
) : (
|
||||||
formsList.map((form) => (
|
formsList.map((form) => (
|
||||||
<TableRow key={form.id}>
|
<TableRow key={form.id} className="group hover:bg-muted/50 transition-colors">
|
||||||
<TableCell className="font-medium">{form.title}</TableCell>
|
<TableCell className="p-0 align-middle">
|
||||||
<TableCell>
|
<Link href={`/admin/form/${form.id}`} className="flex items-center p-3 font-medium h-full w-full">
|
||||||
{form.isOpen ? (
|
{form.title}
|
||||||
<Badge variant="default">Open</Badge>
|
</Link>
|
||||||
) : (
|
|
||||||
<Badge variant="secondary">Closed</Badge>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell className="p-0 align-middle">
|
||||||
{form.createdAt ? new Date(form.createdAt).toLocaleDateString() : 'N/A'}
|
<Link href={`/admin/form/${form.id}`} className="flex items-center p-3 h-full w-full">
|
||||||
|
{form.isOpen ? (
|
||||||
|
<Badge variant="default">Open</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="secondary">Closed</Badge>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right space-x-2">
|
<TableCell className="p-0 align-middle">
|
||||||
<Button variant="outline" asChild size="sm">
|
<Link href={`/admin/form/${form.id}`} className="flex items-center p-3 h-full w-full">
|
||||||
<Link href={`/admin/form/${form.id}`}>Edit</Link>
|
{form.createdAt ? new Date(form.createdAt).toLocaleDateString() : 'N/A'}
|
||||||
</Button>
|
</Link>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right space-x-2 p-3">
|
||||||
<Button variant="outline" asChild size="sm">
|
<Button variant="outline" asChild size="sm">
|
||||||
<Link href={`/admin/form/${form.id}/result`}>Results</Link>
|
<Link href={`/admin/form/${form.id}/result`}>Results</Link>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ import {
|
|||||||
SidebarTrigger,
|
SidebarTrigger,
|
||||||
} from "@/components/ui/sidebar";
|
} from "@/components/ui/sidebar";
|
||||||
import { ClipboardList, Server, LayoutDashboard } from "lucide-react";
|
import { ClipboardList, Server, LayoutDashboard } from "lucide-react";
|
||||||
|
import { ThemeToggle } from "@/components/theme-toggle";
|
||||||
|
|
||||||
export function AdminShell({ children }: { children: React.ReactNode }) {
|
export function AdminShell({ children }: { children: React.ReactNode }) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
@@ -25,10 +26,11 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
|
|||||||
<SidebarProvider>
|
<SidebarProvider>
|
||||||
<div className="flex w-full min-h-screen bg-background text-foreground">
|
<div className="flex w-full min-h-screen bg-background text-foreground">
|
||||||
<Sidebar variant="sidebar" collapsible="icon">
|
<Sidebar variant="sidebar" collapsible="icon">
|
||||||
<SidebarHeader className="border-b border-border py-4 px-4">
|
<SidebarHeader className="border-b border-border py-4 px-4 flex flex-row items-center justify-between">
|
||||||
<span className="font-bold tracking-wider text-primary text-sm uppercase">
|
<span className="font-bold tracking-wider text-primary text-sm uppercase">
|
||||||
Admin
|
Admin
|
||||||
</span>
|
</span>
|
||||||
|
<ThemeToggle />
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
|
|
||||||
<SidebarContent>
|
<SidebarContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user