added more review components

2026-05-14 13:33:57 +02:00
parent 9591131da1
commit e692d0e23c
4 changed files with 137 additions and 41 deletions
@@ -6,6 +6,12 @@
  <link rel="icon" type="image/svg+xml" href="/generated_two_no_background.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Birdy</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+    rel="stylesheet">
 </head>

 <body>
@@ -1,17 +1,27 @@
 .input-box {
    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+    width: 100%;
+    padding: 40px;
+    height: fit-content;
 }

 .review-select-dropdown {
    width: 200px;
    display: flex;
    flex-direction: column;
-    justify-content: flex-start;
-    height: calc(50px + 40px * 2);
+    justify-content: center;
+    height: fit-content;
    gap: 0px;
    user-select: none;
 }

+.review-select-dropdown.rating {
+    width: 60px;
+}
+
 .review-select-button {
    width: 100%;
    height: 50px;
@@ -19,7 +29,8 @@
    background: var(--surface);
    border: 1px solid var(--surface);
    outline: none;
-    color: white;
+    color: black;
+    font-weight: bold;
    border-radius: 16px;
 }

@@ -58,3 +69,34 @@
    cursor: pointer;
    border-color: white;
 }
+
+.review-text-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: fit-content;
+}
+
+.review-text {
+    resize: none;
+    overflow: hidden;
+    width: 300px;
+    height: 160px;
+    border-radius: 8px;
+    border: 1px solid var(--surface);
+    background: var(--surface);
+    color: black;
+    padding: 10px;
+    font-family: "Space Mono", monospace;
+    font-size: 15px;
+}
+
+.review-text:focus {
+    border: 1px solid white;
+}
+
+.review-text::placeholder {
+    color: white;
+}
@@ -1,13 +1,15 @@
 import { useState, useRef, useEffect } from 'react';
 import './Reviews.css';
+import SelectDropdown from './components/SelectDropdown';

 function Reviews() {
    const [error, setError] = useState(null);
    const [selectedWebsite, setSelectedWebsite] = useState("Not Specified");
-    const [selectWebsiteVisibility, setSelectWebsiteVisibility] = useState(false);
-    const websiteSelectButton = useRef();
+    const [selectedRating, setSelectedRating] = useState(0);
    const [text, setText] = useState("");

+    const MAX_TEXT = 180;
+

    const fetchReviews = async () => {
        const response = await fetch(`api.marvinkrausser/review`, {
@@ -47,26 +49,25 @@ function Reviews() {
        setSelectedWebsite(website);
    };

+    const changeSelectedRating = (rating) => {
+        setSelectedRating(rating);
+    }
+
    const websites = [
        "CNN (current)",
        "Portfolio",
        "Not Specified"
    ];

-    useEffect(() => {
-        function handleClick(event) {
-            if (websiteSelectButton.current && !websiteSelectButton.current.contains(event.target)
-            ) {
-                setSelectWebsiteVisibility(false);
-            }
-        }
+    const ratings = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

-        document.addEventListener("click", handleClick);
+    const handleTextInput = (e) => {
+        const textInput = e.target.value;

-        return () => {
-            document.removeEventListener("click", handleClick);
+        if (textInput.length <= MAX_TEXT || textInput.length < text.length) {
+            setText(textInput);
+        }
    };
-    }, []);


    return (<>
@@ -74,31 +75,23 @@ function Reviews() {
            <h1 className='site-headline'>Reviews</h1>

            <div className='input-box'>
-                <div className='review-select-dropdown'>
-                    <button ref={websiteSelectButton} className={selectWebsiteVisibility ? "review-select-button active" : "review-select-button"} onClick={() => { setSelectWebsiteVisibility(!selectWebsiteVisibility) }}>
-                        {selectedWebsite}
-                    </button>
-                    {selectWebsiteVisibility && <div className='review-select-menu'>
-                        {websites.map((site, i) =>
-                            selectedWebsite !== site && (
-                                <div
-                                    key={site}
-                                    className={i >= (websites.length - (selectedWebsite == websites.at(-1) ? 2 : 1)) ? "review-select-item last" : "review-select-item"}
-                                    onClick={() => changeSelectedWebsite(site)}
-                                >
-                                    {site}
-                                </div>
-                            )
-                        )}
-                    </div>}
-                </div>
+                <SelectDropdown values={websites} defaultValue={websites.at(0)} classNames={"website"} changeInputParent={changeSelectedWebsite} />

-                <input
+                <div className='review-text-box'>
+                    <textarea
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck={false}
+                        className='review-text'
                        type="text"
                        value={text}
-                    onChange={(e) => setText(e.target.value)}
+                        onChange={(e) => handleTextInput(e)}
                        placeholder="Type something..."
                    />
+                    <p>{text.length}/{MAX_TEXT}</p>
+                </div>
+
+                <SelectDropdown values={ratings} defaultValue={ratings.at(0)} classNames={"rating"} changeInputParent={changeSelectedRating} />
            </div>
        </div>
    </>)
@@ -0,0 +1,55 @@
+import { useState, useRef, useEffect } from 'react';
+
+function SelectDropdown(props) {
+    const values = props.values;
+    const defaultValue = props.defaultValue;
+    const classNames = props.classNames;
+    const changeInputParent = props.changeInputParent;
+    const [selectedInput, setselectedInput,] = useState(defaultValue);
+    const [selectVisibility, setSelectVisibility] = useState(false);
+    const SelectButton = useRef();
+
+    useEffect(() => {
+        function handleClick(event) {
+            if (SelectButton.current && !SelectButton.current.contains(event.target)
+            ) {
+                setSelectVisibility(false);
+            }
+        }
+
+        document.addEventListener("click", handleClick);
+
+        return () => {
+            document.removeEventListener("click", handleClick);
+        };
+    }, []);
+
+    const changeSelectedInput = (input) => {
+        setselectedInput(input);
+        changeInputParent(input);
+    };
+
+
+    return (
+        <div className={`review-select-dropdown ${classNames}`} >
+            <button ref={SelectButton} className={selectVisibility ? `review-select-button ${classNames} active` : `review-select-button ${classNames}`} onClick={() => { setSelectVisibility(!selectVisibility) }}>
+                {selectedInput}
+            </button>
+            {selectVisibility && <div className={`review-select-menu ${classNames}`}>
+                {values.map((item, i) =>
+                    String(selectedInput) !== String(item) && (
+                        <div
+                            key={item}
+                            className={i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? `review-select-item ${classNames} last` : `review-select-item ${classNames}`}
+                            onClick={() => changeSelectedInput(item)}
+                        >
+                            {item}
+                        </div>
+                    )
+                )}
+            </div>}
+        </ div>
+    );
+}
+
+export default SelectDropdown;