Merge pull request #11 from Craftserve/quo/komponent-textarea-z-figmy

feature: Textarea component

Author: Quoflame77

src/components/Textarea.astro

@@ -0,0 +1,43 @@
+---
+import type { JSX } from 'astro/jsx-runtime';
+
+type textareaProps = JSX.IntrinsicElements['textarea'];
+
+const props = Astro.props as textareaProps;
+---
+<div class="textarea-container">
+    <textarea {...props} />
+</div>
+<style>
+
+    textarea {
+        outline: 0;
+        border: 0;
+        font-size: 16px;
+        padding: 8px;
+        font-family: var(--ubuntu);
+        resize: none;
+        overflow-wrap: break-word;
+        white-space: pre-wrap;
+    }
+
+    .textarea-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        outline: var(--placeholder);
+        color: var(--placeholder);
+        border: none;
+        border-bottom: 2px var(--placeholder) solid;
+        caret-color: var(--placeholder);
+        transition: all 0.3s ease-in-out;
+    }
+
+     .textarea-container:focus-within {
+        outline: var(--primary);
+        color: black;
+        border: none;
+        border-bottom: 2px var(--primary) solid;
+        caret-color: var(--primary);
+    }
+</style>

src/pages/en/index.astro

@@ -7,7 +7,6 @@ import Offers from '../../sections/Offers.astro';
 import Carousel from '../../sections/Carousel.astro';
 import Icons from '../../sections/Icons.astro';
 import Table from '../../sections/Table.astro';
-import Input from '../../components/Input.astro';
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
@@ -21,7 +20,6 @@ import Input from '../../components/Input.astro';
 	<Icons />
 	<Table />
 	<Carousel />
-	<Input type="email" id="test" placeholder="[email protected]"/>
 </Layout>
 
 <style>

src/pages/index.astro

@@ -1,25 +1,25 @@
 ---
-import Footer from "../sections/Footer.astro";
-import Navbar from "../sections/Navbar.astro";
-import Layout from "../layouts/Layout.astro";
-import Hero from "../sections/Hero.astro";
-import Offers from "../sections/Offers.astro";
-import Icons from "../sections/Icons.astro";
-import Carousel from "../sections/Carousel.astro";
-import Table from "../sections/Table.astro";
+import Footer from '../sections/Footer.astro';
+import Navbar from '../sections/Navbar.astro';
+import Layout from '../layouts/Layout.astro';
+import Hero from '../sections/Hero.astro';
+import Offers from '../sections/Offers.astro';
+import Icons from '../sections/Icons.astro';
+import Carousel from '../sections/Carousel.astro';
+import Table from '../sections/Table.astro';
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
 ---
 
 <Layout>
-    <div class="infoContainer">
-        <Hero />
-        <Offers />
-    </div>
-    <Icons />
-    <Table />
-    <Carousel />
+	<div class="infoContainer">
+		<Hero />
+		<Offers />
+	</div>
+	<Icons />
+	<Table />
+	<Carousel />
 </Layout>
 
 <style>