dashboard ui
This commit is contained in:
parent
14ea89d690
commit
bf35c2bf82
@ -6,27 +6,34 @@ import { useEffect, useState } from "react";
|
|||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
export default function DashboardNavbarSearch() {
|
export default function DashboardNavbarSearch() {
|
||||||
const [search, setSearch] = useState("");
|
// const [search, setSearch] = useState("");
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
const delayDebounceFn = setTimeout(() => {
|
// const delayDebounceFn = setTimeout(() => {
|
||||||
if (search) {
|
// if (search) {
|
||||||
router.push(`/dashboard?q=${search}`);
|
// router.push(`/dashboard?q=${search}`);
|
||||||
} else {
|
// } else {
|
||||||
router.push(`/dashboard`);
|
// router.push(`/dashboard`);
|
||||||
}
|
// }
|
||||||
}, 300);
|
// }, 300);
|
||||||
|
|
||||||
return () => clearTimeout(delayDebounceFn);
|
// return () => clearTimeout(delayDebounceFn);
|
||||||
}, [search]);
|
// }, [search]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative h-9 w-44 flex items-center justify-start">
|
<div className="relative h-9 w-44 flex items-center justify-start">
|
||||||
<Search className="w-4 h-4 absolute left-2 text-muted-foreground" />
|
<Search className="w-4 h-4 absolute left-2 text-muted-foreground" />
|
||||||
<Input
|
<Input
|
||||||
value={search}
|
// value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
// onChange={(e) => setSearch(e.target.value)}
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e.target.value === "") {
|
||||||
|
router.push(`/dashboard`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
router.push(`/dashboard?q=${e.target.value}`);
|
||||||
|
}}
|
||||||
placeholder="Search projects..."
|
placeholder="Search projects..."
|
||||||
className="pl-8"
|
className="pl-8"
|
||||||
/>
|
/>
|
||||||
|
@ -31,7 +31,7 @@ export default function ProjectCard({
|
|||||||
onClick={() => router.push(`/code/${sandbox.id}`)}
|
onClick={() => router.push(`/code/${sandbox.id}`)}
|
||||||
onMouseEnter={() => setHovered(true)}
|
onMouseEnter={() => setHovered(true)}
|
||||||
onMouseLeave={() => setHovered(false)}
|
onMouseLeave={() => setHovered(false)}
|
||||||
className={`group/canvas-card p-4 h-48 flex flex-col justify-between items-start hover:border-muted-foreground relative overflow-hidden transition-all`}
|
className={`group/canvas-card p-4 h-48 flex flex-col justify-between items-start hover:border-muted-foreground/50 relative overflow-hidden transition-all`}
|
||||||
>
|
>
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{hovered && (
|
{hovered && (
|
||||||
|
@ -38,7 +38,7 @@ export const CanvasRevealEffect = ({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{showGradient && (
|
{showGradient && (
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-neutral-950 to-[84%]" />
|
<div className="absolute inset-0 bg-gradient-to-t from-background to-[100%]" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
|
|||||||
import Loading from "@/components/editor/loading";
|
import Loading from "@/components/editor/loading";
|
||||||
import { Sandbox, User } from "@/lib/types";
|
import { Sandbox, User } from "@/lib/types";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { startServer } from "@/lib/utils";
|
// import { startServer } from "@/lib/utils";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
const CodeEditor = dynamic(() => import("@/components/editor/editor"), {
|
const CodeEditor = dynamic(() => import("@/components/editor/editor"), {
|
||||||
@ -23,18 +23,15 @@ export default function Editor({
|
|||||||
const [didFail, setDidFail] = useState(false);
|
const [didFail, setDidFail] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
startServer(sandboxData.id, userData.id, (success: boolean) => {
|
// startServer(sandboxData.id, userData.id, (success: boolean) => {
|
||||||
if (!success) {
|
// if (!success) {
|
||||||
toast.error("Failed to start server.");
|
// toast.error("Failed to start server.");
|
||||||
setDidFail(true);
|
// setDidFail(true);
|
||||||
} else {
|
// } else {
|
||||||
setIsServerRunning(true);
|
// setIsServerRunning(true);
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
console.log("startServer");
|
||||||
// return () => {
|
|
||||||
// stopServer(sandboxData.id, userData.id);
|
|
||||||
// };
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (!isServerRunning || didFail)
|
if (!isServerRunning || didFail)
|
||||||
|
@ -54,10 +54,11 @@ export default function UserButton({ userData }: { userData: User }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem className="cursor-pointer">
|
|
||||||
|
{/* <DropdownMenuItem className="cursor-pointer">
|
||||||
<Pencil className="mr-2 h-4 w-4" />
|
<Pencil className="mr-2 h-4 w-4" />
|
||||||
<span>Edit Profile</span>
|
<span>Edit Profile</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem> */}
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => signOut(() => router.push("/"))}
|
onClick={() => signOut(() => router.push("/"))}
|
||||||
className="!text-destructive cursor-pointer"
|
className="!text-destructive cursor-pointer"
|
||||||
|
@ -62,32 +62,32 @@ export function addNew(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function startServer(
|
// export async function startServer(
|
||||||
sandboxId: string,
|
// sandboxId: string,
|
||||||
userId: string,
|
// userId: string,
|
||||||
callback: (success: boolean) => void
|
// callback: (success: boolean) => void
|
||||||
) {
|
// ) {
|
||||||
try {
|
// try {
|
||||||
const res = await fetch("http://localhost:4001/start", {
|
// const res = await fetch("http://localhost:4001/start", {
|
||||||
method: "POST",
|
// method: "POST",
|
||||||
headers: {
|
// headers: {
|
||||||
"Content-Type": "application/json",
|
// "Content-Type": "application/json",
|
||||||
},
|
// },
|
||||||
body: JSON.stringify({
|
// body: JSON.stringify({
|
||||||
sandboxId,
|
// sandboxId,
|
||||||
userId,
|
// userId,
|
||||||
}),
|
// }),
|
||||||
});
|
// });
|
||||||
|
|
||||||
if (res.status !== 200) {
|
// if (res.status !== 200) {
|
||||||
console.error("Failed to start server", res);
|
// console.error("Failed to start server", res);
|
||||||
callback(false);
|
// callback(false);
|
||||||
}
|
// }
|
||||||
|
|
||||||
callback(true);
|
// callback(true);
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.error("Failed to start server", error);
|
// console.error("Failed to start server", error);
|
||||||
|
|
||||||
callback(false);
|
// callback(false);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
Loading…
x
Reference in New Issue
Block a user