fix(ui): Add back button in Create Search Space Page

This commit is contained in:
Sabin Shrestha 2025-07-18 16:18:28 +05:45
parent 63d06031a3
commit d8fceb76ca

View file

@ -3,7 +3,7 @@
import { useState } from "react"; import { useState } from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Plus, Search, Trash2 } from "lucide-react"; import { MoveLeftIcon, Plus, Search, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
@ -33,6 +33,7 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { useRouter } from "next/navigation";
// Define the form schema with Zod // Define the form schema with Zod
const searchSpaceFormSchema = z.object({ const searchSpaceFormSchema = z.object({
@ -59,6 +60,7 @@ export function SearchSpaceForm({
initialData = { name: "", description: "" } initialData = { name: "", description: "" }
}: SearchSpaceFormProps) { }: SearchSpaceFormProps) {
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const router = useRouter();
// Initialize the form with React Hook Form and Zod validation // Initialize the form with React Hook Form and Zod validation
const form = useForm<SearchSpaceFormValues>({ const form = useForm<SearchSpaceFormValues>({
@ -115,15 +117,30 @@ export function SearchSpaceForm({
animate="visible" animate="visible"
variants={containerVariants} variants={containerVariants}
> >
<motion.div className="flex flex-col space-y-2" variants={itemVariants}> <motion.div className="flex items-center justify-between" variants={itemVariants}>
<h2 className="text-3xl font-bold tracking-tight"> <div className="flex flex-col space-y-2">
{isEditing ? "Edit Search Space" : "Create Search Space"} <h2 className="text-3xl font-bold tracking-tight">
</h2> {isEditing ? "Edit Search Space" : "Create Search Space"}
<p className="text-muted-foreground"> </h2>
{isEditing <p className="text-muted-foreground">
? "Update your search space details" {isEditing
: "Create a new search space to organize your documents, chats, and podcasts."} ? "Update your search space details"
</p> : "Create a new search space to organize your documents, chats, and podcasts."}
</p>
</div>
<button
className="group relative rounded-full p-3 bg-background/80 hover:bg-muted border border-border hover:border-primary/20 shadow-sm hover:shadow-md transition-all duration-200 backdrop-blur-sm"
onClick={() => {
router.push('/dashboard')
}}
>
<MoveLeftIcon
size={18}
className="text-muted-foreground group-hover:text-foreground transition-colors duration-200"
/>
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</button>
</motion.div> </motion.div>
<motion.div <motion.div