add search projects functionality
This commit is contained in:
Ishaan Dey
parent
a084ecd6c7
commit
e6e5247a3d
@ -15,6 +15,8 @@ import { Sandbox } from "@/lib/types"
|
||||
import DashboardProjects from "./projects"
|
||||
import DashboardSharedWithMe from "./shared"
|
||||
import NewProjectModal from "./newProject"
|
||||
import Link from "next/link"
|
||||
import { useSearchParams } from "next/navigation"
|
||||
|
||||
type TScreen = "projects" | "shared" | "settings" | "search"
|
||||
|
||||
@ -40,6 +42,9 @@ export default function Dashboard({
|
||||
else return "justify-start font-normal text-muted-foreground"
|
||||
}
|
||||
|
||||
const searchParams = useSearchParams()
|
||||
const q = searchParams.get("q")
|
||||
|
||||
return (
|
||||
<>
|
||||
<NewProjectModal
|
||||
@ -72,23 +77,25 @@ export default function Dashboard({
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Shared With Me
|
||||
</Button>
|
||||
<Button
|
||||
{/* <Button
|
||||
variant="ghost"
|
||||
onClick={() => setScreen("settings")}
|
||||
className={activeScreen("settings")}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</Button> */}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start font-normal text-muted-foreground"
|
||||
>
|
||||
<Code2 className="w-4 h-4 mr-2" />
|
||||
GitHub Repository
|
||||
</Button>
|
||||
<Link href="https://github.com/ishaan1013/sandbox">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start font-normal text-muted-foreground"
|
||||
>
|
||||
<Code2 className="w-4 h-4 mr-2" />
|
||||
GitHub Repository
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start font-normal text-muted-foreground"
|
||||
@ -99,7 +106,7 @@ export default function Dashboard({
|
||||
</div>
|
||||
</div>
|
||||
{screen === "projects" ? (
|
||||
<DashboardProjects sandboxes={sandboxes} />
|
||||
<DashboardProjects sandboxes={sandboxes} q={q} />
|
||||
) : screen === "shared" ? (
|
||||
<DashboardSharedWithMe shared={shared} />
|
||||
) : screen === "settings" ? null : null}
|
||||
|
||||
@ -12,18 +12,20 @@ import { toast } from "sonner"
|
||||
|
||||
export default function DashboardProjects({
|
||||
sandboxes,
|
||||
q,
|
||||
}: {
|
||||
sandboxes: Sandbox[]
|
||||
q: string | null
|
||||
}) {
|
||||
const onDelete = async (sandbox: Sandbox) => {
|
||||
toast(`Project ${sandbox.name} deleted.`)
|
||||
const res = await deleteSandbox(sandbox.id)
|
||||
await deleteSandbox(sandbox.id)
|
||||
}
|
||||
|
||||
const onVisibilityChange = async (sandbox: Sandbox) => {
|
||||
const newVisibility = sandbox.visibility === "public" ? "private" : "public"
|
||||
toast(`Project ${sandbox.name} is now ${newVisibility}.`)
|
||||
const res = await updateSandbox({
|
||||
await updateSandbox({
|
||||
id: sandbox.id,
|
||||
visibility: newVisibility,
|
||||
})
|
||||
@ -31,57 +33,66 @@ export default function DashboardProjects({
|
||||
|
||||
return (
|
||||
<div className="grow p-4 flex flex-col">
|
||||
<div className="text-xl font-medium mb-8">My Projects</div>
|
||||
<div className="text-xl font-medium mb-8">
|
||||
{q && q.length > 0 ? `Showing search results for: ${q}` : "My Projects"}
|
||||
</div>
|
||||
<div className="grow w-full ">
|
||||
<div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
|
||||
{sandboxes.map((sandbox) => (
|
||||
<Link
|
||||
key={sandbox.id}
|
||||
href={`/code/${sandbox.id}`}
|
||||
className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
|
||||
>
|
||||
<Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
|
||||
{/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
|
||||
<div className="space-x-2 flex items-center justify-start w-full">
|
||||
<Image
|
||||
alt=""
|
||||
src={
|
||||
sandbox.type === "react"
|
||||
? "/project-icons/react.svg"
|
||||
: "/project-icons/node.svg"
|
||||
}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
<div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
|
||||
{sandbox.name}
|
||||
{sandboxes.map((sandbox) => {
|
||||
if (q && q.length > 0) {
|
||||
if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
key={sandbox.id}
|
||||
href={`/code/${sandbox.id}`}
|
||||
className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
|
||||
>
|
||||
<Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
|
||||
{/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
|
||||
<div className="space-x-2 flex items-center justify-start w-full">
|
||||
<Image
|
||||
alt=""
|
||||
src={
|
||||
sandbox.type === "react"
|
||||
? "/project-icons/react.svg"
|
||||
: "/project-icons/node.svg"
|
||||
}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
<div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
|
||||
{sandbox.name}
|
||||
</div>
|
||||
<ProjectCardDropdown
|
||||
sandbox={sandbox}
|
||||
onVisibilityChange={onVisibilityChange}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
</div>
|
||||
<ProjectCardDropdown
|
||||
sandbox={sandbox}
|
||||
onVisibilityChange={onVisibilityChange}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
|
||||
<div className="flex items-center">
|
||||
{sandbox.visibility === "private" ? (
|
||||
<>
|
||||
<Lock className="w-3 h-3 mr-2" /> Private
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Globe className="w-3 h-3 mr-2" /> Public
|
||||
</>
|
||||
)}
|
||||
<div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
|
||||
<div className="flex items-center">
|
||||
{sandbox.visibility === "private" ? (
|
||||
<>
|
||||
<Lock className="w-3 h-3 mr-2" /> Private
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Globe className="w-3 h-3 mr-2" /> Public
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Clock className="w-3 h-3 mr-2" /> 3d ago
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Clock className="w-3 h-3 mr-2" /> 3d ago
|
||||
</div>
|
||||
</div>
|
||||
{/* </ProjectCard> */}
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
{/* </ProjectCard> */}
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user