Eingabefeld, Listenansicht erstellt

Eingabefeld fertig + Listenansicht

package-lock.json

@@ -5396,6 +5396,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "font-awesome": "^4.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

src/App.css

@@ -2,8 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");
+
 .App {
   text-align: center;
+  font-family: qicksand, arial;
 }
 
 .App-logo {

src/App.js

@@ -1,9 +1,10 @@
-import Eingabefelder from "./Components/eingabefelder";
+import Eingabefeld from "./Components/eingabefeld";
+import "../node_modules/font-awesome/css/font-awesome.min.css";
 
 function App() {
   return (
     <div className="App">
-      <Eingabefelder label="test" placeholder="password" />
+      <Eingabefeld label="Name" isPassword={false} placeholder="&#xf007;" />
       <p className="from-green-50">tets</p>
     </div>
   );

src/Components/eingabefeld.jsx

@@ -5,8 +5,10 @@ function Eingabefeld(props) {
   return (
     <div>
       <label>{props.label}</label>
+      <br />
       <input
         className="form-control
+        border-radius: 5px
         block
         w-220
         h-35
@@ -15,11 +17,11 @@ function Eingabefeld(props) {
         text-base
         font-normal
         border border-solid border-gray-300
-        rounded
-        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
+        rounded"
         onChange={(e) => setPollName(e.target.value)}
         value={usepollName}
         placeholder={props.placeholder}
+        type={props.isPassword ? "password" : "text"}
       />
     </div>
   );

src/Components/liste.jsx

@@ -0,0 +1,11 @@
+import React, { useState } from "react";
+
+function Liste(props) {
+  return (
+    <div>
+      <Label></Label>
+    </div>
+  );
+}
+
+export default Liste;

src/index.css

@@ -4,14 +4,16 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+input {
+  font-family: FontAwesome;
 }