alma/NeahNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pages s3

Browse Source
This commit is contained in:
alma 2025-05-04 16:19:09 +02:00
parent d5f3270dcb
commit a7a03927dd
1 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/notes-dialog.tsx
View File

@ -1,12 +1,31 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogPortal } from "@/components/ui/dialog";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Loader2 } from "lucide-react"; import { Loader2, X } from "lucide-react";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import * as React from "react";
// Custom DialogOverlay to override the default black background
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
interface NotesDialogProps { interface NotesDialogProps {
open: boolean; open: boolean;
@ -72,9 +91,9 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[500px]"> <DialogContent className="sm:max-w-[500px] bg-white border-gray-200">
<DialogHeader> <DialogHeader>
<DialogTitle>Quick Note</DialogTitle> <DialogTitle className="text-gray-900">Quick Note</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
@ -88,7 +107,7 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
<Input <Input
id="title" id="title"
placeholder="Note title" placeholder="Note title"
className="col-span-4" className="col-span-4 text-gray-900"
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
disabled={isSaving} disabled={isSaving}
@ -99,7 +118,7 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
<Textarea <Textarea
id="content" id="content"
placeholder="What's on your mind?" placeholder="What's on your mind?"
className="col-span-4" className="col-span-4 text-gray-900"
rows={10} rows={10}
value={content} value={content}
onChange={(e) => setContent(e.target.value)} onChange={(e) => setContent(e.target.value)}
@ -109,10 +128,19 @@ export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}> <Button
variant="destructive"
onClick={() => onOpenChange(false)}
disabled={isSaving}
className="bg-red-600 hover:bg-red-700 text-white"
>
Cancel Cancel
</Button> </Button>
<Button onClick={handleSave} disabled={isSaving}> <Button
onClick={handleSave}
disabled={isSaving}
className="bg-blue-600 hover:bg-blue-700 text-white"
>
{isSaving ? ( {isSaving ? (
<> <>
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> <Loader2 className="mr-2 h-4 w-4 animate-spin" />