...

.prettierrc.json

@@ -1,3 +1,3 @@
 {
-    "plugins": ["prettier-plugin-tailwind"]
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

app/(root)/(home)/page.tsx

@@ -19,7 +19,7 @@ const Home = async () => {
         <h1 className="h1-bold text-dark100_light900">All Questions</h1>
 
         <Link href="/ask-question" className="flex justify-end max-sm:w-full ">
-          <Button className="min-h-[46px] px-4 py-3 primary-gradient !text-light-900">
+          <Button className="primary-gradient min-h-[46px] px-4 py-3 !text-light-900">
             Ask a Question
           </Button>
         </Link>
@@ -47,7 +47,7 @@ const Home = async () => {
       <HomeFilters />
 
       {/* queston tag  goes here */}
-      <div className="flex mt-10 w-full flex-col gap-6">
+      <div className="mt-10 flex w-full flex-col gap-6">
         {result.questions.length > 0 ? (
           // Loop over the questions array and render the QuestionCard component
           result.questions.map((question) => (

app/(root)/ask-question/page.tsx

@@ -6,11 +6,10 @@ import { redirect } from "next/navigation";
 import React from "react";
 
 const Page = async () => {
-
-  const {userId}= auth();
+  const { userId } = auth();
   // const userId = "123456";
 
-  if (!userId) redirect('/sign-in');
+  if (!userId) redirect("/sign-in");
 
   const mongoUser = await getUserId({ userId });
 

app/api/webhook/route.ts

@@ -53,8 +53,14 @@ export async function POST(req: Request) {
 
   // Get the ID and type
   const eventType = evt.type;
+  console.log({ eventType });
+
+  console.log("Webhook event:", evt);
+
+  console.log("Webhook payload:", body);
 
   if (eventType === "user.created") {
+    console.log("creting user ");
     // get data from the event
     const { id, email_addresses, image_url, username, first_name, last_name } =
       evt.data;

app/globals.css

@@ -10,19 +10,19 @@ body {
 
 @layer utilities {
   .flex-center {
-    @apply flex justify-center items-center;
+    @apply flex items-center justify-center;
   }
 
   .flex-between {
-    @apply flex justify-between items-center;
+    @apply flex items-center justify-between;
   }
 
   .flex-start {
-    @apply flex justify-start items-center;
+    @apply flex items-center justify-start;
   }
 
   .card-wrapper {
-    @apply bg-light-900 dark:dark-gradient shadow-light-100 dark:shadow-dark-100;
+    @apply dark:dark-gradient bg-light-900 shadow-light-100 dark:shadow-dark-100;
   }
 
   .btn {
@@ -38,7 +38,7 @@ body {
   }
 
   .markdown {
-    @apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
+    @apply prose max-w-full prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ol:text-dark-500 prose-ul:text-dark-500 dark:prose-headings:text-white dark:prose-p:text-light-700 dark:prose-strong:text-white dark:prose-ol:text-light-700 dark:prose-ul:text-light-500;
   }
 
   .primary-gradient {
@@ -54,7 +54,7 @@ body {
   }
 
   .tab {
-    @apply min-h-full dark:bg-dark-400 bg-light-800 text-light-500 dark:data-[state=active]:bg-dark-300 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 !important;
+    @apply min-h-full bg-light-800 text-light-500 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 dark:bg-dark-400 dark:data-[state=active]:bg-dark-300 !important;
   }
 }
 

components/forms/QuestionForm.tsx

@@ -42,7 +42,6 @@ const QuestionForm = ({ mongoUserId }: Props) => {
   // state to handle submit action
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-
   // 1. Define your form.
   const form = useForm<z.infer<typeof QuestionsSchema>>({
     resolver: zodResolver(QuestionsSchema),
@@ -73,7 +72,7 @@ const QuestionForm = ({ mongoUserId }: Props) => {
       // navigate back home
       router.push("/");
     } catch (error) {
-      return { error: 'An unexpected error occurred' };
+      return { error: "An unexpected error occurred" };
     } finally {
       setIsSubmitting(false);
     }
@@ -120,10 +119,8 @@ const QuestionForm = ({ mongoUserId }: Props) => {
     form.setValue("tags", newTags);
   }
 
-
   // console.log("API Key:", process.env.TINYMCE_EDITOR_API_KEY);
 
-
   return (
     <Form {...form}>
       <form
@@ -159,7 +156,7 @@ const QuestionForm = ({ mongoUserId }: Props) => {
           control={form.control}
           name="explanation"
           render={({ field }) => (
-            <FormItem className=" flex gap-3 w-full  flex-col">
+            <FormItem className=" flex w-full flex-col  gap-3">
               <FormLabel className="paragraph-semibold text-dark400_light800">
                 Detailed explanation of your problem{" "}
                 <span className="text-primary-500">*</span>
@@ -259,21 +256,20 @@ const QuestionForm = ({ mongoUserId }: Props) => {
         />
         {/* // Todo: Button submiting error /////////////////////////////////////////////// */}
         {/* // button tosubmit/edit form  */}
-         <Button type="submit" className="primary-gradient w-fit !text-light-900" disabled={isSubmitting}>
+        <Button
+          type="submit"
+          className="primary-gradient w-fit !text-light-900"
+          disabled={isSubmitting}
+        >
           {isSubmitting ? (
-            <>
-              {type === 'edit' ? 'Editing...' : 'Posting...' }
-            </>
+            <>{type === "edit" ? "Editing..." : "Posting..."}</>
           ) : (
-            <>
-              {type === 'edit' ? 'Edit Question' : 'Ask a Question'}
-            </>
+            <>{type === "edit" ? "Edit Question" : "Ask a Question"}</>
           )}
         </Button>
       </form>
     </Form>
   );
 };
 
-
 export default QuestionForm;

components/forms/QuestionsCard.tsx

@@ -78,7 +78,6 @@ const QuestionsCard = ({
             imgUrl="/assets/icons/like.svg"
             alt="Upvotes"
             value={formatAndDivideNumber(upvotes.length)}
-
             title=" Votes"
             textStyles="small-medium text-dark400_light800"
           />

components/shared/NoResult.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 const NoResult = ({ title, link, description, linkTitle }: Props) => {
   return (
-    <div className=" flex flex-col w-full items-center justify-center mt-10">
+    <div className=" mt-10 flex w-full flex-col items-center justify-center">
       {/* Light mode image */}
       <Image
         src="/assets/images/light-illustration.png"

components/shared/RenderTag.tsx

@@ -13,7 +13,7 @@ interface Props {
 const RenderTag = ({ _id, name, totalCount, showCount }: Props) => {
   return (
     <Link href={`./tags/${_id}`} className="flex justify-between gap-2">
-      <Badge className="bg-light-800 dark:bg-dark-400 text-light400_light500 subtle-medium rounded-md border-none px-4 py-2 uppercase">
+      <Badge className="text-light400_light500 subtle-medium rounded-md border-none bg-light-800 px-4 py-2 uppercase dark:bg-dark-400">
         {name}
       </Badge>
 

components/shared/navbar/GlobalSearch.tsx

@@ -1,7 +1,6 @@
 import Image from "next/image";
 import React from "react";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 
 const GlobalSearch = () => {
   return (
@@ -17,7 +16,7 @@ const GlobalSearch = () => {
         <Input
           type="text"
           placeholder="Search anything globally..."
-          className="paragraph-regular no-focus mx-3 placeholder background-light800_darkgradient border-none shadow-none outline-none"
+          className="paragraph-regular no-focus placeholder background-light800_darkgradient mx-3 border-none shadow-none outline-none"
           alt="Search Input"
         />
       </div>
@@ -26,5 +25,3 @@ const GlobalSearch = () => {
 };
 
 export default GlobalSearch;
-
-

components/shared/navbar/MobileNav.tsx

@@ -44,7 +44,7 @@ const NavContent = () => {
                 isActive
                   ? "primary-gradient rounded-lg text-light-900"
                   : "text-dark300_light900"
-              } flex justify-start items-center gap-4 p-4 bg-transparent`}
+              } flex items-center justify-start gap-4 bg-transparent p-4`}
             >
               <Image
                 className={`${isActive ? "" : "invert-colors"}`}
@@ -92,7 +92,7 @@ const MobileNav = () => {
             height={23}
             alt="DevFlow"
           />
-          <p className="font-spaceGrotesk h2-bold text-dark100_light900">
+          <p className="h2-bold text-dark100_light900 font-spaceGrotesk">
             Dev <span className="text-primary-500">OverFlow</span>
           </p>
         </Link>
@@ -106,15 +106,15 @@ const MobileNav = () => {
             <div className="flex flex-col gap-3">
               <SheetClose asChild>
                 <Link href="/sign-in">
-                  <Button className="w-full min-h-[41px] px-4 py-3 rounded-lg btn-secondary shadow-none small-medium">
+                  <Button className="btn-secondary small-medium min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none">
                     <span className="primary-text-gradient">Log In</span>
                   </Button>
                 </Link>
               </SheetClose>
 
               <SheetClose asChild>
                 <Link href="/sign-up">
-                  <Button className="w-full min-h-[41px] px-4 py-3 rounded-lg text-dark400_light900 btn-tertiary shadow-none small-medium light-border-2">
+                  <Button className="text-dark400_light900 btn-tertiary small-medium light-border-2 min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none">
                     Sign Up
                   </Button>
                 </Link>

components/shared/navbar/Navbar.tsx

@@ -10,15 +10,15 @@ import GlobalSearch from "./GlobalSearch";
 const Navbar = () => {
   return (
     <div>
-      <nav className="fixed z-50 w-full p-6 gap-5 flex-between background-light900_dark200 shadow-light-300 dark:shadow-none sm:p-0 sm:px-12">
+      <nav className="flex-between background-light900_dark200 fixed z-50 w-full gap-5 p-6 shadow-light-300 dark:shadow-none sm:p-0 sm:px-12">
         <Link href="/" className="flex items-center gap-2">
           <Image
             src="/assets/images/site-logo.svg"
             width={23}
             height={23}
             alt="DevFlow"
           />
-          <p className="max-sm:hidden h2-bold font-spaceGrotesk text-dark-100 dark:text-light-900">
+          <p className="h2-bold font-spaceGrotesk text-dark-100 dark:text-light-900 max-sm:hidden">
             Dev <span className="text-primary-500">OverFlow</span>
           </p>
         </Link>

components/shared/navbar/Theme.tsx

@@ -19,7 +19,7 @@ const Theme = () => {
   const { mode, setMode } = useTheme();
 
   return (
-    <Menubar className="relative bg-transparent border-none shadow-none">
+    <Menubar className="relative border-none bg-transparent shadow-none">
       <MenubarMenu>
         <MenubarTrigger className="focus:bg-light-900 data-[state=open]:bg-light-900 dark:focus:bg-dark-200 dark:data-[state=open]:bg-dark-200">
           {mode === "light" ? (

components/ui/form.tsx

@@ -134,7 +134,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );
@@ -156,7 +156,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("text-destructive text-sm font-medium", className)}
       {...props}
     >
       {body}

components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

components/ui/menubar.tsx

@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      "bg-background flex h-10 items-center space-x-1 rounded-md border p-1",
       className,
     )}
     {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
       className,
     )}
     {...props}
@@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       inset && "pl-8",
       className,
     )}
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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",
+      "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 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}
@@ -97,7 +97,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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",
+          "bg-popover text-popover-foreground z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md data-[state=open]:animate-in 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}
@@ -116,7 +116,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -132,7 +132,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -155,7 +155,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -194,7 +194,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
@@ -207,7 +207,7 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "text-muted-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}