Merge branch 'master' into quo/komponent-textarea-z-figmy

Author: Quoflame77

.prettierrc

@@ -0,0 +1,17 @@
+{
+  "plugins": ["prettier-plugin-astro"],
+  "endOfLine": "lf",
+  "tabWidth": 4,
+  "useTabs": false,
+  "printWidth": 120,
+  "trailingComma": "es5",
+  "semi": true,
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package-lock.json

@@ -17,6 +17,7 @@
     "embla-carousel-auto-scroll": "^8.6.0"
   },
   "devDependencies": {
-    "prettier": "^3.6.2"
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1"
   }
 }

package.json

@@ -1,5 +1,5 @@
 ---
-interface Props{
+interface Props {
     id: string;
     fontSize?: string;
     variant: "primary" | "secondary" | "outlined";
@@ -10,40 +10,39 @@ const { id, variant, fontSize = "1em" } = Astro.props as Props;
 const variantClassMap: Record<string, string> = {
     primary: "dark",
     secondary: "light",
-}
+};
 
 const buttonClass = variantClassMap[variant] ?? "outlined";
-
 ---
+
 <button type="button" id={id} class={`button ${buttonClass}`}>
-    <slot/>
+    <slot />
 </button>
 
-<style define:vars={{fontSize}}>
-    .dark{
+<style define:vars={{ fontSize }}>
+    .dark {
         color: var(--light);
         background-color: var(--dark);
         box-shadow: 0px 5px 5px var(--dark);
     }
 
-    .light{
+    .light {
         color: var(--dark);
         background-color: var(--secondary);
     }
 
-    .outlined{
+    .outlined {
         color: var(--primary);
         background-color: transparent;
         border: 2px solid var(--primary);
     }
 
-    .button{
+    .button {
         border-radius: 10px;
         border: none;
         padding: 15px 30px;
         cursor: pointer;
         font-weight: 700;
-
         font-size: var(--fontSize);
     }
-</style>
+</style>

src/components/Button.astro

@@ -1,6 +1,5 @@
 ---
-import { undefined } from 'astro:schema';
-
+import { undefined } from "astro:schema";
 
 interface Props {
     variant: "light" | "dark";
@@ -11,41 +10,37 @@ interface Props {
 }
 
 const { variant, title = undefined, styles = "" } = Astro.props as Props;
-
 ---
 
 <div class={`wrapper ${variant}`} style={styles}>
     <div class="circlesBar">
-        <div class="circle green" />
-        <div class="circle yellow" />
-        <div class="circle red" />
+        <div class="circle green"></div>
+        <div class="circle yellow"></div>
+        <div class="circle red"></div>
     </div>
 
     <div class="infoContainer">
-        {title && (
-            <span class="title">{title}</span>
-        )}
+        {title && <span class="title">{title}</span>}
 
         <slot />
     </div>
-
 </div>
 
 <style>
-    .wrapper{
+    .wrapper {
         display: flex;
         flex-direction: column;
         border-radius: 12px;
         padding: 0px 20px 30px 20px;
         border: 2px solid var(--secondary);
         overflow-y: hidden;
         backdrop-filter: blur(32px);
-        box-shadow: 0px 10px 5px rgba(0,0,0,0.1);
+        box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.1);
         width: 100%;
         height: auto;
     }
 
-    .circlesBar{
+    .circlesBar {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -55,44 +50,44 @@ const { variant, title = undefined, styles = "" } = Astro.props as Props;
         padding-top: 20px;
     }
 
-    .circle{
+    .circle {
         width: 10px;
         height: 10px;
         border-radius: 50%;
     }
 
-    .red{
+    .red {
         background-color: var(--danger);
     }
 
-    .yellow{
+    .yellow {
         background-color: var(--warning);
     }
 
-    .green{
+    .green {
         background-color: var(--success);
     }
 
-    .infoContainer{
+    .infoContainer {
         width: 100%;
         padding: 10px 0px;
         display: flex;
         flex-direction: column;
         gap: 10px;
     }
 
-    .title{
+    .title {
         font-weight: 700;
         font-size: 20px;
     }
 
-    .light{
+    .light {
         background-color: var(--lightDimmed);
         color: var(--light);
     }
 
-    .dark{
+    .dark {
         background-color: var(--darkDimmed);
         color: var(--light);
     }
-</style>
+</style>

src/components/Card.astro

@@ -1,20 +1,19 @@
 ---
-import type { JSX } from 'astro/jsx-runtime';
+import type { JSX } from "astro/jsx-runtime";
 import { Icon } from "astro-icon/components";
 
-
-type InputProps = JSX.IntrinsicElements['input'];
+type InputProps = JSX.IntrinsicElements["input"];
 
 const props = Astro.props as InputProps;
 ---
+
 <div class="input-container">
-    <input {...props}>
+    <input {...props} />
     <div class="icon-container" aria-hidden="true">
-        <Icon name="tabler:alert-circle" class="icon-error"/>
+        <Icon name="tabler:alert-circle" class="icon-error" />
     </div>
 </div>
 <style>
-
     input {
         outline: 0;
         border: 0;
@@ -35,7 +34,7 @@ const props = Astro.props as InputProps;
         transition: all 0.3s ease-in-out;
     }
 
-     .input-container:focus-within {
+    .input-container:focus-within {
         outline: var(--primary);
         color: black;
         border: none;
@@ -52,13 +51,13 @@ const props = Astro.props as InputProps;
         width: 13px;
     }
 
-    .input-container:has(input:invalid){
-        outline: var(--danger) ;
-        color: var(--danger) ;
-        caret-color: var(--danger) ;
+    .input-container:has(input:invalid) {
+        outline: var(--danger);
+        color: var(--danger);
+        caret-color: var(--danger);
         border: none;
         border-bottom: 2px var(--danger) solid;
-        
+
         input {
             color: var(--danger);
         }
@@ -67,5 +66,4 @@ const props = Astro.props as InputProps;
             visibility: visible;
         }
     }
-
-</style>
+</style>

src/components/Input.astro

@@ -1,8 +1,7 @@
 ---
-import { undefined } from 'astro:schema';
+import { undefined } from "astro:schema";
 
-
-interface Props{
+interface Props {
     href: string | URL;
     variant: "blank" | "primary" | "outlined";
     fullWidth?: boolean;
@@ -14,11 +13,11 @@ const isFullWidth = fullWidth ? "100%" : "fit-content";
 ---
 
 <a class=`link ${variant}` href={href}>
-    <slot/>
+    <slot />
 </a>
 
-<style define:vars={{isFullWidth}}>
-    .link{
+<style define:vars={{ isFullWidth }}>
+    .link {
         text-decoration: none;
         cursor: pointer;
         padding: 10px 20px;
@@ -31,23 +30,24 @@ const isFullWidth = fullWidth ? "100%" : "fit-content";
         justify-content: center;
         gap: 5px;
         min-width: 80px;
-        
+
         width: var(--isFullWidth);
     }
 
-    .primary{ /* dark */
+    .primary {
+        /* dark */
         color: var(--light);
         background-color: var(--dark);
         box-shadow: 0px 5px 5px rgba(12, 12, 12, 0.33);
     }
 
-    .outlined{
+    .outlined {
         color: var(--primary);
         background-color: transparent;
         border: 2px solid var(--primary);
     }
- 
-    .blank{
+
+    .blank {
         color: var(--dark);
     }
-</style>
+</style>