diff options
| author | MohamedBassem <me@mbassem.com> | 2024-02-08 02:16:51 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-02-08 02:23:29 +0000 |
| commit | 2659da517aeec0fe955422dee76f7de292f1a591 (patch) | |
| tree | 5150d69d2e5b70aea2cad6adefc6e2511d0d29da /web/app/bookmarks/components | |
| parent | 7344f167edae95b2edd984ec1ae0ef5359d1e028 (diff) | |
| download | karakeep-2659da517aeec0fe955422dee76f7de292f1a591.tar.zst | |
[feature] Introduce a sidebar
Diffstat (limited to 'web/app/bookmarks/components')
| -rw-r--r-- | web/app/bookmarks/components/AddLink.tsx | 43 | ||||
| -rw-r--r-- | web/app/bookmarks/components/LinkCard.tsx | 96 | ||||
| -rw-r--r-- | web/app/bookmarks/components/LinksGrid.tsx | 21 |
3 files changed, 0 insertions, 160 deletions
diff --git a/web/app/bookmarks/components/AddLink.tsx b/web/app/bookmarks/components/AddLink.tsx deleted file mode 100644 index fab4db8b..00000000 --- a/web/app/bookmarks/components/AddLink.tsx +++ /dev/null @@ -1,43 +0,0 @@ -"use client"; - -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import APIClient from "@/lib/api"; -import { Plus } from "lucide-react"; -import { useRouter } from "next/navigation"; -import { useState } from "react"; - -export default function AddLink() { - const router = useRouter(); - const [link, setLink] = useState(""); - - const bookmarkLink = async () => { - const [_resp, error] = await APIClient.bookmarkLink(link); - if (error) { - // TODO: Proper error handling - alert(error.message); - return; - } - router.refresh(); - }; - - return ( - <div className="py-4 container flex w-full items-center space-x-2"> - <Input - type="text" - placeholder="Link" - value={link} - onChange={(val) => setLink(val.target.value)} - onKeyUp={async (event) => { - if (event.key == "Enter") { - bookmarkLink(); - setLink(""); - } - }} - /> - <Button onClick={bookmarkLink}> - <Plus /> - </Button> - </div> - ); -} diff --git a/web/app/bookmarks/components/LinkCard.tsx b/web/app/bookmarks/components/LinkCard.tsx deleted file mode 100644 index da59d9da..00000000 --- a/web/app/bookmarks/components/LinkCard.tsx +++ /dev/null @@ -1,96 +0,0 @@ -"use client"; - -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { - ImageCard, - ImageCardBody, - ImageCardFooter, - ImageCardTitle, -} from "@/components/ui/imageCard"; -import { useToast } from "@/components/ui/use-toast"; -import APIClient from "@/lib/api"; -import { ZBookmarkedLink } from "@/lib/types/api/links"; -import { MoreHorizontal, Trash2 } from "lucide-react"; -import Link from "next/link"; -import { useRouter } from "next/navigation"; - -export function LinkOptions({ linkId }: { linkId: string }) { - const { toast } = useToast(); - const router = useRouter(); - - const unbookmarkLink = async () => { - let [_, error] = await APIClient.unbookmarkLink(linkId); - - if (error) { - toast({ - variant: "destructive", - title: "Something went wrong", - description: "There was a problem with your request.", - }); - } else { - toast({ - description: "The link has been deleted!", - }); - } - - router.refresh(); - }; - return ( - <DropdownMenu> - <DropdownMenuTrigger asChild> - <Button variant="ghost"> - <MoreHorizontal /> - </Button> - </DropdownMenuTrigger> - <DropdownMenuContent className="w-fit"> - <DropdownMenuItem className="text-destructive" onClick={unbookmarkLink}> - <Trash2 className="mr-2 h-4 w-4" /> - <span>Delete</span> - </DropdownMenuItem> - </DropdownMenuContent> - </DropdownMenu> - ); -} - -export default function LinkCard({ link }: { link: ZBookmarkedLink }) { - const parsedUrl = new URL(link.url); - - return ( - <ImageCard - className={ - "bg-gray-50 duration-300 ease-in border border-grey-100 hover:transition-all hover:border-blue-300" - } - image={link.details?.imageUrl ?? undefined} - > - <ImageCardTitle> - <Link className="line-clamp-3" href={link.url}> - {link.details?.title ?? parsedUrl.host} - </Link> - </ImageCardTitle> - <ImageCardBody className="py-2 overflow-clip"> - {link.tags.map((t) => ( - <Badge variant="default" className="bg-gray-300 text-gray-500" key={t.id}> - #{t.name} - </Badge> - ))} - </ImageCardBody> - <ImageCardFooter> - <div className="flex justify-between text-gray-500"> - <div className="my-auto"> - <Link className="line-clamp-1 hover:text-black" href={link.url}> - {parsedUrl.host} - </Link> - </div> - <LinkOptions linkId={link.id} /> - </div> - </ImageCardFooter> - </ImageCard> - ); -} diff --git a/web/app/bookmarks/components/LinksGrid.tsx b/web/app/bookmarks/components/LinksGrid.tsx deleted file mode 100644 index 4b82df98..00000000 --- a/web/app/bookmarks/components/LinksGrid.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { getServerSession } from "next-auth"; -import { redirect } from "next/navigation"; -import { authOptions } from "@/lib/auth"; -import { getLinks } from "@/lib/services/links"; -import LinkCard from "./LinkCard"; - -export default async function LinksGrid() { - const session = await getServerSession(authOptions); - if (!session) { - redirect("/"); - } - const links = await getLinks(session.user.id); - - return ( - <div className="container p-8 mx-auto grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"> - {links.map((l) => ( - <LinkCard key={l.id} link={l} /> - ))} - </div> - ); -} |
