Merge pull request 'linuxdocker-komponensekupdate' (#11) from linuxdocker-komponensekupdate into main

Reviewed-on: #11

SerpentRace_Frontend/src/components/Buttons/Button.jsx

@@ -3,14 +3,16 @@
 
 import { motion } from "framer-motion";
 
-export default function Button({ text, type, onClick }) {
+export default function Button({ text, type, onClick, width }) {
+  const widthClass = width ? width : "w-full";
+
   return (
     <motion.button
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
       type={type}
       onClick={onClick}
-      className="w-full bg-button-primary text-white py-3 rounded-lg hover:bg-button-hover transition shadow-md font-semibold text-lg"
+      className={`${widthClass} bg-button-primary text-white py-3 rounded-lg hover:bg-button-hover transition shadow-md font-semibold text-lg`}
     >
       {text}
     </motion.button>

SerpentRace_Frontend/src/components/Inputs/InputBox.jsx

@@ -1,16 +1,16 @@
 // src/components/Inputs/InputBox.jsx
 // InputBox komponens
 
-export default function InputBox({ type, placeholder, value, onChange }) {
+export default function InputBox({ type, placeholder, value, onChange, width }) {
-    return (
+  const widthClass = width ? width : "w-full";
-      <div className="mb-6 relative">
+
-        <input
+  return (
-          type={type}
+    <input
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-background focus:outline-none text-gray-700 placeholder-gray-400 bg-gray-50"
+      type={type}
-          placeholder={placeholder}
+      className={`${widthClass} px-4 py-3 border border-gray-300 rounded-lg focus:border-background focus:outline-none text-gray-700 placeholder-gray-400 bg-gray-50`}
-          value={value}
+      placeholder={placeholder}
-          onChange={onChange}
+      value={value}
-        />
+      onChange={onChange}
-      </div>
+    />
-    );
+  );
-  }
+}

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -42,7 +42,7 @@ export default function LoginForm() {
       {error && (
         <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
       )}
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="email"
           placeholder="Email cím"

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -54,7 +54,7 @@ export default function RegisterForm() {
       {error && (
         <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
       )}
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="text"
           placeholder="Teljes név"

SerpentRace_Frontend/src/pages/Testing/Test.jsx

@@ -1,10 +1,27 @@
 import { useState } from "react";
+import Button from "../../components/Buttons/Button";
+import InputBox from "../../components/Inputs/InputBox";
 
 export default function Test() {
 
   return (
-    <div className="bg-red-100 text-white p-4">
+    <div className="w-full h-screen flex flex-col items-center justify-center">
-      <p className="text-piros">Test</p>
+      <InputBox
+        placeholder="Input"
+        type="text"
+        width="w-1/2"
+        onChange={(e) => {
+          console.log(value);
+        }}
+      />
+      <Button
+        text="Button"
+        type="button"
+        width="w-1/2"
+        onClick={() => {
+          console.log("Button clicked");
+        }}
+      />
     </div>
   );
 }

run.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+cd ./SerpentRace_Docker || exit 1
+docker compose watch
+read -p "Press any key to continue..."

stop.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+cd ./SerpentRace_Docker || exit 1
+docker compose stop
+read -p "Press any key to continue..."