Format code better

compass/app/auth/layout.tsx

@@ -11,12 +11,12 @@ export default function RootLayout({
 }) {
   return (
     <Paper>
-                <form  className="mb-0 m-auto mt-6 space-y-4 border border-gray-200 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
+      <form className="mb-0 m-auto mt-6 space-y-4 border border-gray-200 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
-            {children}
+        {children}
-         </form>
+      </form>
-         <p className="text-center mt-6 text-gray-500 text-xs">
+      <p className="text-center mt-6 text-gray-500 text-xs">
-                    &copy; 2024 Compass Center
+        &copy; 2024 Compass Center
-                </p>
+      </p>
-         </Paper>
+    </Paper>
   )
 }

compass/app/resource/layout.tsx

@@ -2,7 +2,7 @@
 
 import Sidebar from '@/components/resource/Sidebar';
 import React, { useState } from 'react';
-import {ChevronDoubleRightIcon} from '@heroicons/react/24/outline'; 
+import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
 
 export default function RootLayout({
 

compass/components/resource/Card.tsx

@@ -1,4 +1,4 @@
-import React, {ReactNode} from "react";
+import React, { ReactNode } from "react";
 
 
 interface TagProps {

compass/components/resource/LandingSearchBar.tsx

@@ -3,43 +3,43 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 
 export const LandingSearchBar: React.FC = () => {
-    const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
 
-    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchTerm(event.target.value);
+    setSearchTerm(event.target.value);
-    };
+  };
 
-    const clearSearch = () => {
+  const clearSearch = () => {
-      setSearchTerm('');
+    setSearchTerm('');
-    };
+  };
 
-    return (
+  return (
-      <div className="max-w mx-auto">
+    <div className="max-w mx-auto">
-        <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
+      <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
-          <div className="flex-grow">
+        <div className="flex-grow">
-            <input
+          <input
-              className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
+            className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
-              type="text"
+            type="text"
-              placeholder="Search..."
+            placeholder="Search..."
-              value={searchTerm}
+            value={searchTerm}
-              onChange={handleSearchChange}
+            onChange={handleSearchChange}
-            />
+          />
-          </div>
-          {searchTerm && (
-            <button
-              onClick={clearSearch}
-            >
-              <XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-            </button>
-          )}
-          <div className="p-3">
-            <MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-          </div>
         </div>
-        <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
+        {searchTerm && (
-        <Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
+          <button
-        <h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links above or the search bar to get your results.</h2>
+            onClick={clearSearch}
+          >
+            <XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
+          </button>
+        )}
+        <div className="p-3">
+          <MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
         </div>
       </div>
-    );
+      <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
-  };
+        <Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
+        <h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links above or the search bar to get your results.</h2>
+      </div>
+    </div>
+  );
+};

compass/components/resource/Sidebar.tsx

@@ -6,16 +6,16 @@ interface SidebarProps {
   setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({setIsSidebarOpen}) => {
+const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
   return (
     <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4 shadow">
       <div className="flex justify-end">
         <button
-            onClick={() => setIsSidebarOpen(false)}
+          onClick={() => setIsSidebarOpen(false)}
-            className="py-2 text-gray-500 hover:text-gray-800"
+          className="py-2 text-gray-500 hover:text-gray-800"
-            aria-label="Close sidebar"
+          aria-label="Close sidebar"
         >
-            <ChevronDoubleLeftIcon className="h-5 w-5" />
+          <ChevronDoubleLeftIcon className="h-5 w-5" />
         </button>
       </div>
       <div className="flex flex-col space-y-8">
@@ -24,19 +24,19 @@ const Sidebar: React.FC<SidebarProps> = ({setIsSidebarOpen}) => {
 
           <div className="flex flex-col items-start space-y-2">
             <div className="flex flex-col">
-                <span className="text-sm font-semibold text-gray-800">Compass Center</span>
+              <span className="text-sm font-semibold text-gray-800">Compass Center</span>
-                <span className="text-xs text-gray-500">cssgunc@gmail.com</span>
+              <span className="text-xs text-gray-500">cssgunc@gmail.com</span>
             </div>
             <button className="text-red-600 text-xs hover:underline mt-1">Sign out</button>
           </div>
         </div>
         <div className="flex flex-col space-y-2">
-        <h4 className="text-xs font-semibold text-gray-500">Pages</h4>
+          <h4 className="text-xs font-semibold text-gray-500">Pages</h4>
-        <nav className="flex flex-col">
+          <nav className="flex flex-col">
-          <SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-500" />} text="Resources" />
+            <SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-500" />} text="Resources" />
-          <SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-500" />} text="Services" />
+            <SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-500" />} text="Services" />
-          <SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-500" />} text="Training Manuals" />
+            <SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-500" />} text="Training Manuals" />
-        </nav>
+          </nav>
         </div>
       </div>
     </div>

compass/components/resource/SidebarItem.tsx

@@ -1,14 +1,14 @@
 
 interface SidebarItemProps {
-    icon: React.ReactElement;
+  icon: React.ReactElement;
-    text: string;
+  text: string;
-  }
+}
 
 export const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
-    return (
+  return (
-      <a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
+    <a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
-        {icon}
+      {icon}
-        <span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
+      <span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
-      </a>
+    </a>
-    );
+  );
-  };
+};