From ed6ef51d4ca28358f0c3c35f23d401dd78cd9e7a Mon Sep 17 00:00:00 2001
From: T'JAMPENS QUENTIN p2406187 <pyramond69@gmail.com>
Date: Sat, 8 Nov 2025 18:47:51 +0100
Subject: [PATCH] Creation composant input

---
 src/components/ui/input/input.jsx        | 13 ++++++++++
 src/components/ui/input/input.module.css | 32 ++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/components/ui/input/input.jsx
 create mode 100644 src/components/ui/input/input.module.css

diff --git a/src/components/ui/input/input.jsx b/src/components/ui/input/input.jsx
new file mode 100644
index 0000000..c756a3e
--- /dev/null
+++ b/src/components/ui/input/input.jsx
@@ -0,0 +1,13 @@
+import styles from "./input.module.css";
+
+const TextInput = ({ placeholder, onChange, value, borderStyle, ...props }) => {
+
+
+    let inputBorderStyle = styles.square;
+    if (borderStyle === "square") inputBorderStyle = styles.square;
+    if(borderStyle === "rounded") inputBorderStyle = styles.rounded;
+
+    return <input className={`${styles.input} ${inputBorderStyle}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
+};
+
+export default TextInput;
diff --git a/src/components/ui/input/input.module.css b/src/components/ui/input/input.module.css
new file mode 100644
index 0000000..eaafa25
--- /dev/null
+++ b/src/components/ui/input/input.module.css
@@ -0,0 +1,32 @@
+.input {
+    border: 1px solid rgba(200, 200, 200, 0.3);
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #000;
+    font-size: 16px;
+    outline: none;
+    transition: all 0.3s ease;
+    width: fit-content;
+    padding: 8px 10px 8px 10px;
+    height: fit-content;
+}
+
+.input::placeholder {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.input:focus {
+    border-color: rgba(200, 200, 200, 0.6);
+    box-shadow: 0 4px 30px rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.38);
+}
+
+.rounded {
+    border-radius: 25px;
+}
+
+.square {
+    border-radius: 12px;
+}
+