mirror of https://github.com/kortix-ai/suna.git
wip
This commit is contained in:
marko-kraemer
parent
f9ca36efa0
commit
5a002001cc
|
|
@ -6,16 +6,7 @@ import {
|
||||||
SidebarInset,
|
SidebarInset,
|
||||||
SidebarProvider,
|
SidebarProvider,
|
||||||
} from "@/components/ui/sidebar"
|
} from "@/components/ui/sidebar"
|
||||||
import {
|
import { MaintenanceAlert } from "@/components/maintenance-alert"
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from "@/components/ui/alert-dialog"
|
|
||||||
import { Clock } from "lucide-react"
|
|
||||||
|
|
||||||
interface DashboardLayoutProps {
|
interface DashboardLayoutProps {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
|
|
@ -40,24 +31,11 @@ export default function DashboardLayout({
|
||||||
</div>
|
</div>
|
||||||
</SidebarInset>
|
</SidebarInset>
|
||||||
|
|
||||||
<AlertDialog open={showMaintenanceAlert} onOpenChange={setShowMaintenanceAlert}>
|
<MaintenanceAlert
|
||||||
<AlertDialogContent className="border border-muted">
|
open={showMaintenanceAlert}
|
||||||
<AlertDialogHeader className="gap-3">
|
onOpenChange={setShowMaintenanceAlert}
|
||||||
<div className="flex items-center justify-center">
|
closeable={true}
|
||||||
<Clock className="h-8 w-8 text-muted-foreground" />
|
/>
|
||||||
</div>
|
|
||||||
<AlertDialogTitle className="text-lg font-medium">High Demand Notice</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
Due to exceptionally high demand, our service is currently experiencing slower response times.
|
|
||||||
We recommend returning tomorrow when our systems will be operating at normal capacity.
|
|
||||||
<span className="mt-2 block">Thank you for your understanding.</span>
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogAction>I'll Return Tomorrow</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</SidebarProvider>
|
</SidebarProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
|
||||||
|
import { Clock, Github, X } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { AnimatePresence, motion } from "motion/react"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
|
||||||
|
interface MaintenanceAlertProps {
|
||||||
|
open: boolean
|
||||||
|
onOpenChange: (open: boolean) => void
|
||||||
|
closeable?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MaintenanceAlert({ open, onOpenChange, closeable = true }: MaintenanceAlertProps) {
|
||||||
|
return (
|
||||||
|
<AlertDialog open={open} onOpenChange={closeable ? onOpenChange : undefined}>
|
||||||
|
<AlertDialogContent className="max-w-2xl w-[90vw] p-0 border-0 shadow-lg overflow-hidden rounded-2xl z-[9999]">
|
||||||
|
<motion.div
|
||||||
|
className="relative"
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ type: "spring", damping: 30, stiffness: 300 }}
|
||||||
|
>
|
||||||
|
{/* Background pattern */}
|
||||||
|
<div className="absolute inset-0 bg-accent/20 opacity-20">
|
||||||
|
<div className="absolute inset-0 bg-grid-white/10 [mask-image:radial-gradient(white,transparent_85%)]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{closeable && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-4 top-4 z-20 rounded-full hover:bg-background/80"
|
||||||
|
onClick={() => onOpenChange(false)}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<AlertDialogHeader className="gap-6 px-8 pt-10 pb-6 relative z-10">
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center justify-center"
|
||||||
|
initial={{ y: -10, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<div className="flex size-16 items-center justify-center rounded-full bg-gradient-to-t from-primary/20 to-secondary/10 backdrop-blur-md">
|
||||||
|
<div className="flex size-12 items-center justify-center rounded-full bg-gradient-to-t from-primary to-primary/80 shadow-md">
|
||||||
|
<Clock className="h-6 w-6 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: -10, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<AlertDialogTitle className="text-2xl font-bold text-center text-primary bg-clip-text">
|
||||||
|
High Demand Notice
|
||||||
|
</AlertDialogTitle>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: -10, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<AlertDialogDescription className="text-base text-center leading-relaxed">
|
||||||
|
Due to exceptionally high demand, our service is currently experiencing slower response times.
|
||||||
|
We recommend returning tomorrow when our systems will be operating at normal capacity.
|
||||||
|
<span className="mt-4 block font-medium text-primary">Thank you for your understanding. We will notify you via email once the service is fully operational again.</span>
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</motion.div>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
|
||||||
|
<AlertDialogFooter className="p-8 pt-4 border-t border-border/40 bg-background/40 backdrop-blur-sm">
|
||||||
|
<Link
|
||||||
|
href="https://github.com/kortix-ai/suna"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="mx-auto w-full flex items-center justify-center gap-3 bg-gradient-to-tr from-primary to-primary/80 hover:opacity-90 text-white font-medium rounded-full px-8 py-3 transition-all hover:shadow-md"
|
||||||
|
>
|
||||||
|
<Github className="h-5 w-5 transition-transform group-hover:scale-110" />
|
||||||
|
<span>Explore Self-Hosted Version</span>
|
||||||
|
</Link>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</motion.div>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue