errors

app/(root)/profile/[id]/page.tsx

@@ -109,14 +109,20 @@ const Page = async ({ params, searchParams }: URLProps) => {
               Answers
             </TabsTrigger>
           </TabsList>
-          <TabsContent value="top-posts">
+          <TabsContent
+            value="top-posts"
+            className="mt-5 flex w-full flex-col gap-6"
+          >
             <QuestionsTab
               searchParams={searchParams}
               userId={userInfo?.user._id}
               clerkId={clerkId}
             />
           </TabsContent>
-          <TabsContent value="answers" className="flex w-full flex-col gap-6">
+          <TabsContent
+            value="answers"
+            className="mt-5 flex w-full flex-col gap-6"
+          >
             <AnswersTab
               searchParams={searchParams}
               userId={userInfo?.user._id}

components/forms/Profile.tsx

@@ -95,13 +95,13 @@ const Profile = ({ clerkId, user }: Props) => {
           name="name"
           render={({ field }) => (
             <FormItem className="space-y-3.5">
-              <FormLabel>
+              <FormLabel className="paragraph-semibold text-dark400_light800">
                 Name <span className="text-primary-500">*</span>
               </FormLabel>
 
               <FormControl>
                 <Input
-                  className="no-focus paragraph-regular background-light700_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
+                  className="no-focus paragraph-regular background-light800_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
                   placeholder="Your Name"
                   {...field}
                 />
@@ -117,13 +117,13 @@ const Profile = ({ clerkId, user }: Props) => {
           name="username"
           render={({ field }) => (
             <FormItem className="space-y-3.5">
-              <FormLabel>
+              <FormLabel className="paragraph-semibold text-dark400_light800">
                 Username <span className="text-primary-500">*</span>
               </FormLabel>
 
               <FormControl>
                 <Input
-                  className="no-focus paragraph-regular background-light700_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
+                  className="no-focus paragraph-regular background-light800_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
                   placeholder="Your Username"
                   {...field}
                 />
@@ -140,12 +140,14 @@ const Profile = ({ clerkId, user }: Props) => {
           name="portfolioWebsite"
           render={({ field }) => (
             <FormItem className="space-y-3.5">
-              <FormLabel>Portfolio Link</FormLabel>
+              <FormLabel className="paragraph-semibold text-dark400_light800">
+                Portfolio Link
+              </FormLabel>
 
               <FormControl>
                 <Input
                   type="url"
-                  className="no-focus paragraph-regular background-light700_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
+                  className="no-focus paragraph-regular background-light800_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
                   placeholder="Your portfolio link"
                   {...field}
                 />
@@ -162,11 +164,13 @@ const Profile = ({ clerkId, user }: Props) => {
           name="location"
           render={({ field }) => (
             <FormItem className="space-y-3.5">
-              <FormLabel>Location</FormLabel>
+              <FormLabel className="paragraph-semibold text-dark400_light800">
+                Location
+              </FormLabel>
 
               <FormControl>
                 <Input
-                  className="no-focus paragraph-regular background-light700_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
+                  className="no-focus paragraph-regular background-light800_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
                   placeholder="where are you from?"
                   {...field}
                 />
@@ -183,11 +187,13 @@ const Profile = ({ clerkId, user }: Props) => {
           name="bio"
           render={({ field }) => (
             <FormItem className="space-y-3.5">
-              <FormLabel>About You</FormLabel>
+              <FormLabel className="paragraph-semibold text-dark400_light800">
+                About You
+              </FormLabel>
 
               <FormControl>
                 <Textarea
-                  className="no-focus paragraph-regular background-light700_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
+                  className="no-focus paragraph-regular background-light800_dark300 light-border-2 text-dark300_light700 min-h-[56px] border"
                   placeholder="what's special about your?"
                   {...field}
                 />

components/shared/EditDeleteAction.tsx

@@ -3,53 +3,98 @@ import { deleteAnswer } from "@/lib/actions/answer.action";
 import { deleteQuestion } from "@/lib/actions/question.action";
 import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
+import { useToast } from "../ui/use-toast";
+import { useState } from "react";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../ui/hover-card";
 
 interface Props {
   type: string;
   itemId: string;
 }
 
 const EditDeleteAction = ({ type, itemId }: Props) => {
+  const { toast } = useToast();
   const pathName = usePathname();
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
 
   //  ⁡⁣⁢⁣ 𝗛𝗮𝗻𝗱𝗹𝗲 𝗘𝗱𝗶𝘁 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻⁡
   const handleEdit = () => {
     router.push(`/question/edit/${JSON.parse(itemId)}`);
   };
   //   ⁡⁣⁢⁣𝗛𝗮𝗻𝗹𝗱𝗲 𝗗𝗲𝗹𝗲𝘁𝗲 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻⁡
   const handleDelete = async () => {
-    if (type === "Question") {
-      // ⁡⁣⁣⁢𝘋𝘦𝘭𝘦𝘵𝘦 𝘲𝘶𝘦𝘴𝘵𝘪𝘰𝘯⁡
-      await deleteQuestion({ questionId: JSON.parse(itemId), path: pathName });
-    } else if (type === "Answer") {
-      // ⁡⁣⁣⁢𝘋𝘦𝘭𝘦𝘵𝘦 𝘈𝘯𝘴𝘸𝘦𝘳⁡
-      await deleteAnswer({ answerId: JSON.parse(itemId), path: pathName });
+    setLoading(true); // Disable the button while the operation is in progress
+    try {
+      if (type === "Question") {
+        // ⁡⁣⁣⁢𝘋𝘦𝘭𝘦𝘵𝘦 𝘲𝘶𝘦𝘴𝘵𝘪𝘰𝘯⁡
+        await deleteQuestion({
+          questionId: JSON.parse(itemId),
+          path: pathName,
+        });
+
+        toast({
+          title: "Question Deleted Successfully",
+          variant: "destructive",
+        });
+      } else if (type === "Answer") {
+        // ⁡⁣⁣⁢𝘋𝘦𝘭𝘦𝘵𝘦 𝘈𝘯𝘴𝘸𝘦𝘳⁡
+        await deleteAnswer({ answerId: JSON.parse(itemId), path: pathName });
+
+        toast({
+          title: "Answer Deleted Successfully",
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      console.error("Error deleting item:", error);
+      toast({
+        title: "Error deleting items",
+        description: error.message || "An unexpected error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false); // Re-enable the button after the operation completed
     }
   };
 
   return (
-    <div className="flex items-center justify-end gap-3 max-sm:w-full">
-      {type === "Question" && (
+    <HoverCard openDelay={0} closeDelay={1000000000}>
+      <div className="flex items-center justify-end gap-3 max-sm:w-full">
+        {type === "Question" && (
+          <>
+            <HoverCardTrigger className="w-10">
+              <Image
+                src="/assets/icons/edit.svg"
+                alt="Edit Button"
+                width={14}
+                height={14}
+                className="cursor-pointer object-contain"
+                onClick={handleEdit}
+              />
+            </HoverCardTrigger>
+            <HoverCardContent side="top" className="w-40 dark:bg-light-400 ">
+              Edit Question
+            </HoverCardContent>
+          </>
+        )}
+
         <Image
-          src="/assets/icons/edit.svg"
-          alt="Edit Button"
+          src="/assets/icons/trash.svg"
+          alt="Delete Button"
           width={14}
           height={14}
-          className="cursor-pointer object-contain"
-          onClick={handleEdit}
+          className={`cursor-pointer object-contain ${
+            loading ? "cursor-not-allowed opacity-50" : ""
+          }`}
+          onClick={!loading ? handleDelete : undefined}
         />
-      )}
-
-      <Image
-        src="/assets/icons/trash.svg"
-        alt="Delete Button"
-        width={14}
-        height={14}
-        className="cursor-pointer object-contain"
-        onClick={handleDelete}
-      />
-    </div>
+      </div>
+    </HoverCard>
   );
 };
 

components/shared/Filter.tsx

@@ -56,7 +56,11 @@ const Filter = ({ filters, otherClasses, containerClasses }: FilterProps) => {
         <SelectContent className="background-light900_dark200 text-dark500_light700">
           <SelectGroup>
             {filters.map((filterItem) => (
-              <SelectItem key={filterItem.value} value={filterItem.value}>
+              <SelectItem
+                key={filterItem.value}
+                value={filterItem.value}
+                className="cursor-pointer"
+              >
                 {filterItem.name}
               </SelectItem>
             ))}

components/shared/RenderTag.tsx

@@ -12,7 +12,7 @@ interface Props {
 const RenderTag = ({ _id, name, totalQuestions, showCount }: Props) => {
   return (
     <Link href={`/tags/${_id}`} className="flex justify-between gap-2">
-      <Badge className="subtle-medium background-light800_dark300 text-light400_light500 rounded-md border-none px-4 py-2 uppercase">
+      <Badge className="subtle-medium background-light800_dark300 text-light400_light500 rounded-md border-none px-4 py-2 uppercase  hover:text-primary-500 dark:hover:text-primary-500">
         {name}
       </Badge>
 

components/shared/RightSidebar.tsx

@@ -11,16 +11,20 @@ const RightSidebar = async () => {
   return (
     <section className="custom-scrollbar background-light900_dark200 light-border sticky right-0 top-0 flex h-screen w-[350px] flex-col gap-6 overflow-y-auto border-l p-6 pt-36 shadow-light-300 dark:shadow-none max-xl:hidden">
       <div>
-        <h3 className="h3-bold text-dark200_light900">Top Questions</h3>
+        <h3 className="h3-bold text-dark200_light900 relative text-center">
+          <span className="absolute -top-4 left-0 h-[2px] w-full bg-[#a8a29e]"></span>
+          Top Questions
+          <span className="absolute left-0 top-10 h-[2px] w-full bg-[#a8a29e]"></span>
+        </h3>
 
-        <div className="mt-7 flex w-full flex-col gap-[30px]">
+        <div className="mt-12 flex w-full flex-col gap-[30px]">
           {hotQuestions.map((question) => (
             <Link
               key={question._id}
               href={`/question/${question._id}`}
-              className="flex cursor-pointer items-center justify-between gap-7"
+              className="flex cursor-pointer items-center justify-between gap-7 "
             >
-              <p className="body-medium text-dark500_light700">
+              <p className="body-medium text-dark-500 hover:text-primary-500 dark:text-light-700 dark:hover:text-primary-500">
                 {question.title}
               </p>
               <Image
@@ -34,9 +38,13 @@ const RightSidebar = async () => {
           ))}
         </div>
       </div>
-      <div className="mt-16">
-        <h3 className="h3-bold text-dark200_light900">Popular Tags</h3>
-        <div className="mt-7 flex flex-col gap-4">
+      <div className="mt-8">
+        <h3 className="h3-bold text-dark200_light900 relative text-center">
+          <span className="absolute -top-4 left-0 h-[2px] w-full bg-[#a8a29e]"></span>
+          Popular Tags
+          <span className="absolute left-0 top-10 h-[2px] w-full bg-[#a8a29e]"></span>
+        </h3>
+        <div className="mt-12 flex flex-col gap-4">
           {popularTags.map((tag) => (
             <RenderTag
               key={tag._id}

components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }