Refactored Filter component layout and styling for better responsiveness and dynamic spacing. Added env.example file

Author: ladunjexa

.env.example

@@ -0,0 +1,19 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<YOUR_CLERK_PUBLISHABLE_KEY>
+CLERK_SECRET_KEY=<YOUR_CLERK_SECRET_KEY>
+
+CLERK_WEBHOOK_SECRET=<YOUR_CLERK_WEBHOOK_SECRET>
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding
+
+NEXT_PUBLIC_TINY_MCE_API_KEY=<YOUR_TINY_MCE_API_KEY>
+
+MONGODB_URL=<YOUR_MONGODB_URL>
+
+NEXT_PUBLIC_SERVER_URL=<YOUR_SERVER_URL>
+
+OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
+
+RAPID_API_KEY=<YOUR_RAPID_API_KEY>

components/shared/Filters.tsx

@@ -47,16 +47,18 @@ const Filters = ({
   };
 
   return (
-    <div className="mt-10 flex-wrap gap-3 md:flex">
-      {filters.map((filter) => (
+    <div className="mt-10 flex flex-wrap-reverse gap-3 md:flex-wrap">
+      {filters.map((filter, index) => (
         <Button
           key={filter.value}
           onClick={() => handleTypeClick(filter.value)}
           className={`body-medium rounded-lg px-6 py-3 capitalize shadow-none ${
             active === filter.value
               ? "bg-primary-100 text-primary-500 dark:bg-dark-400 dark:hover:bg-dark-400"
               : "bg-light-800 text-light-500 hover:bg-light-800 dark:bg-dark-300 dark:text-light-500 dark:hover:bg-dark-300"
-          }`}
+          }
+          ${index !== filters.length - 1 && "mb-1 mr-1 md:mb-0 md:mr-0"}
+          `}
         >
           {filter.name}
         </Button>