feat(lint): switch to eslint config and formatting (use vscode for autoformat)

1 files changed, 64 insertions, 59 deletions

diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
index b0f1282..17c3662 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -1,45 +1,46 @@
 ---
-import ChevronDown from "@components/icons/ChevronDown.svg";
-import type { LogoType, NavbarElement } from "@webtypes/Config";
-import ScreenOverlay from "./ScreenOverlay.astro";
-import Header from "./Header.astro";
-import Tag from "./Tag.astro";
-import Logo from "@components/logos/Logo.astro";
-import ScrollbarOverlayContainer from "./ScrollbarOverlayContainer.astro";
-import Icon from "@components/icons/Icon.astro";
+import type { LogoType, NavbarElement } from '@webtypes/Config';
+import Logo from '@components/logos/Logo.astro';
+import Icon from '@components/icons/Icon.astro';
+import ScreenOverlay from './ScreenOverlay.astro';
+import Header from './Header.astro';
+import Tag from './Tag.astro';
+import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro';
 
 interface Props {
-    element: NavbarElement;
-    index: number;
+	element: NavbarElement
+	index: number
 }
 
 const {
-    element,
-    index
+	element,
+	index,
 } = Astro.props;
 ---
 
-<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
-    <label for={`navbar-input-${index}`} class="group">
+	<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
+		<label for={`navbar-input-${index}`} class="group">
 
-        {element.path ? (
-            <a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500">
-                {element.text && element.text}
-                {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
-                {element.dropdown && <Icon icon="chevron-down" />}
-            </a>
-        ) : (
-            <p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default">
-                {element.text && element.text}
-                {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
-                {element.dropdown && <Icon icon="chevron-down" />}
-            </p>
-        )}
+			{element.path
+				? (
+					<a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500">
+						{element.text && element.text}
+						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
+						{element.dropdown && <Icon icon="chevron-down" />}
+					</a>
+					)
+				: (
+					<p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default">
+						{element.text && element.text}
+						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
+						{element.dropdown && <Icon icon="chevron-down" />}
+					</p>
+					)}
 
-        {element.dropdown && (
-            <ScreenOverlay class="max-sm:group-focus-within:opacity-100" />
-            <input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute">
-            <div class={`
+			{element.dropdown && (
+				<ScreenOverlay class="max-sm:group-focus-within:opacity-100" />
+					<input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute">
+					<div class={`
 				transition-opacity
                 fixed md:absolute right-0 max-sm:bottom-0
                 max-sm:overflow-hidden
@@ -51,8 +52,11 @@ const {
                 group-focus-within:pointer-events-auto group-focus-within:opacity-100
                 focus-within:pointer-events-auto focus-within:opacity-100
                 hover:pointer-events-auto hover:opacity-100
-            `}>
-                <ScrollbarOverlayContainer tabindex="-1" class={`
+            `}
+					>
+						<ScrollbarOverlayContainer
+							tabindex="-1"
+							class={`
                     bg-gray-50
                     rounded-t-lg md:rounded-lg
                     transition-transform
@@ -60,30 +64,31 @@ const {
                     group-focus-within:translate-y-0
                     max-h-full md:max-h-96 overflow-y-auto
 					md:shadow-lg
-                `}>
-                    <ul class="p-4">
-                        {element.dropdown.map((item) => (
-                            <li>
-                                <a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
-                                    <div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50">
-                                        <div class="w-[36px]">
-                                            {item.logo && <Logo size={40} logo={item.logo} />}
-                                        </div>
+                `}
+						>
+							<ul class="p-4">
+								{element.dropdown.map(item => (
+									<li>
+										<a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
+										<div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50">
+										<div class="w-[36px]">
+										{item.logo && <Logo size={40} logo={item.logo} />}
+         </div>
 
-                                        <div class="flex flex-col justify-start items-start">
-                                            <div class="flex flex-row gap-2">
-                                                <Header size="sm" class="text-gray-800">{item.name}</Header>
-                                                {item.tag && <Tag>{item.tag}</Tag>}
-                                            </div>
-                                            <p class="text-sm text-gray-400 font-light">{item.description}</p>
-                                        </div>
-                                    </div>
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </ScrollbarOverlayContainer>
-            </div>
-        )}
-    </label>
-</li>
+										<div class="flex flex-col justify-start items-start">
+										<div class="flex flex-row gap-2">
+										<Header size="sm" class="text-gray-800">{item.name}</Header>
+										{item.tag && <Tag>{item.tag}</Tag>}
+         </div>
+										<p class="text-sm text-gray-400 font-light">{item.description}</p>
+         </div>
+         </div>
+         </a>
+         </li>
+								))}
+							</ul>
+						</ScrollbarOverlayContainer>
+					</div>
+			)}
+		</label>
+	</li>