Merge pull request #15 from tzixi/4-tagcomponent

4-tagcomponent

components/TagBox/TagBox.module.css

@@ -0,0 +1,36 @@
+.main {
+  width: 40%;
+  height: 1000px;
+  font-family: "Roboto", sans-serif;
+}
+
+.banner {
+  display: flex;
+  flex-direction: row;
+  background-color: #17475f;
+  align-items: center;
+  padding: 10px;
+  color: white;
+  border-radius: 15px;
+  justify-content: space-between;
+  height: 140px;
+}
+
+.tagtray {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  flex-direction: row;
+  margin: 10px 5px;
+}
+
+.positive {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.negative {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

components/TagBox/TagBox.tsx

@@ -0,0 +1,172 @@
+import { Fab, TextField } from "@mui/material";
+import TagField from "components/TagField/TagField";
+import styles from "./TagBox.module.css";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import { use, useEffect, useState } from "react";
+
+const BannerText = [
+  "1/4 VISUAL TEST",
+  "2/4 USABILITY TEST",
+  "3/4 CONTENT/MEDIA TEST",
+  "4/4 FUNCTIONALITY/RESPONSIVE TEST",
+];
+
+const BannerDesc = [
+  "Information and user interface components must be presentable to users in ways they can perceive.",
+  "User interface components and navigation must be operable.",
+  "Information and the operation of user interface must be understandable.",
+  "Maximize compatibility with current and future user agents, including assistive technologies.",
+];
+
+const PTags = [
+  [
+    "Clear",
+    "Bright",
+    "Bold",
+    "Crisp",
+    "Eye-catching",
+    "Attractive",
+    "Colorful",
+  ],
+  [
+    "Intuitive",
+    "Efficient",
+    "User-friendly",
+    "Responsive",
+    "Streamlined",
+    "Consistent",
+    "Accessible",
+  ],
+  [
+    "Clear",
+    "Simple",
+    "Easy",
+    "Understandable",
+    "Plain",
+    "Illustrated",
+    "Straightforward",
+  ],
+  [
+    "Compatible",
+    "Durable",
+    "Flexible",
+    "Adaptable",
+    "Reliable",
+    "Resilient",
+    "Accessible",
+  ],
+];
+const NTags = [
+  [
+    "Dull",
+    "Faded",
+    "Blurred",
+    "Dim",
+    "Confusing",
+    "Unattractive",
+    "Poorly designed",
+  ],
+  [
+    "Confusing",
+    "Unresponsive",
+    "Slow",
+    "Clumsy",
+    "Inconsistent",
+    "Unintuitive",
+    "Inaccessible",
+  ],
+  [
+    "Complicated",
+    "Confusing",
+    "Vague",
+    "Unclear",
+    "Misleading",
+    "Inconsistent",
+    "Complex",
+  ],
+  [
+    "Fragile",
+    "Incompatible",
+    "Limited",
+    "Unreliable",
+    "Ineffective",
+    "Unadaptable",
+    "Inaccessible",
+  ],
+];
+
+const TagBox = (props: { stage: number }) => {
+  const [selectedTags, setSelectedTags] = useState([] as string[]);
+  const [NTagsArr, setNTags] = useState([] as string[]);
+  const [PTagsArr, setPTags] = useState([] as string[]);
+  useEffect(() => {
+    setSelectedTags(() => [...PTagsArr, ...NTagsArr]);
+  }, [PTagsArr, NTagsArr]);
+
+  const handlePTagChange = (tags: string[]) => {
+    setPTags(tags);
+  };
+  const handleNTagChange = (tags: string[]) => {
+    setNTags(tags);
+  };
+  return (
+    <div className={styles.main}>
+      <div className={styles.banner}>
+        <div>
+          <h2>{BannerText[props.stage] + ":"}</h2>
+          <p>{BannerDesc[props.stage]}</p>
+        </div>
+        <Fab sx={{ alignContent: "center" }} variant="extended">
+          NEXT
+          <ArrowForwardIosIcon />
+        </Fab>
+      </div>
+      <div className={styles.tagtray}>
+        <div className={styles.positive}>
+          <h2>Positive</h2>
+          <TagField
+            onChange={handlePTagChange}
+            defaultTags={PTags[props.stage]}
+            isPositive
+          />
+        </div>
+        <div className={styles.negative}>
+          <h2>Negative</h2>
+          <TagField
+            onChange={handleNTagChange}
+            defaultTags={NTags[props.stage]}
+            isPositive={false}
+          />
+        </div>
+      </div>
+      {selectedTags.length !== 0 ? (
+        <h3>
+          You have selected:
+          {" " + selectedTags.join(", ")}
+        </h3>
+      ) : (
+        ""
+      )}
+      <hr
+        style={{
+          width: "100%",
+          height: "10px",
+          backgroundColor: "#17475F",
+          margin: "15px 0px",
+        }}
+      ></hr>
+      <div className={styles.combinedtray}></div>
+      <div className={styles.remarkbox}>
+        <h2>Additional Remarks:</h2>
+        <TextField
+          placeholder="Enter Remarks here"
+          sx={{ width: "100%" }}
+          multiline
+          variant="outlined"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TagBox;

components/TagField/TagField.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import type { Property } from "csstype";
+import { Tooltip } from "@mui/material";
+
+const tagInput = {
+  backgroundColor: "transparent",
+  flexGrow: 1,
+  padding: "0.5em 0",
+  border: "none",
+  outline: "none",
+  fontSize: "16px",
+  width: "50px",
+};
+
+const tagContainer = {
+  border: "2px solid #DDE2E5",
+  flexWrap: "wrap" as Property.FlexWrap,
+  padding: "0.5em",
+  borderRadius: "3px",
+  width: "100%",
+  marginTop: "1em",
+  display: "flex",
+  alignItems: "center",
+  gap: "5px",
+};
+
+interface Props {
+  onChange: (tags: string[]) => void;
+  defaultTags: string[];
+  isPositive: boolean;
+}
+
+const TagField = ({ onChange, defaultTags, isPositive }: Props) => {
+  const [tags, setTags] = useState(defaultTags);
+  const [selectedTags, setSelectedTags] = useState([] as string[]);
+  useEffect(() => {
+    onChange(selectedTags);
+  }, [selectedTags]);
+  return (
+    <div style={tagContainer}>
+      {tags.map((tags, index) => (
+        <div
+          title="asdasdasasdasd"
+          onClick={() => {
+            if (!selectedTags.includes(tags)) {
+              setSelectedTags(() => [...selectedTags, tags]);
+            } else {
+              setSelectedTags(selectedTags.filter((tag) => tag !== tags));
+            }
+            return;
+          }}
+          style={{
+            backgroundColor: isPositive ? "#21A25C" : "#E23737",
+            filter: selectedTags.includes(tags) ? "brightness(1.1)" : "",
+            display: "inline-block",
+            padding: "0.3em 0.5em",
+            border: selectedTags.includes(tags)
+              ? "5px solid #17475F"
+              : "5px solid transparent",
+            borderRadius: "20px",
+            cursor: "pointer",
+          }}
+          key={index}
+        >
+          <span
+            style={{ color: "white", fontWeight: "500", fontSize: 20 }}
+            className="text"
+          >
+            {tags}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TagField;

src/pages/index.tsx

@@ -8,11 +8,26 @@ import cx from "classnames";
 import Image from "next/image";
 import logo from "../../public/inclusion_lab_photo.png";
 import { Router, useRouter } from "next/router";
+import { useEffect } from "react";
 
 interface Props {}
 
 const Home: NextPage = (props): JSX.Element => {
   const Router = useRouter();
+
+  const fetchThing = async () => {
+    const response = await fetch(
+      "https://asia-southeast1-starlit-array-328711.cloudfunctions.net/hack4good/api/assessments/twilio",
+      { mode: "cors" }
+    );
+    const data = await response.json();
+    console.log(data);
+  };
+
+  useEffect(() => {
+    fetchThing();
+  }, []);
+
   return (
     <>
       <Head>

src/pages/temp/index.tsx

@@ -0,0 +1,5 @@
+import TagBox from "components/TagBox/TagBox";
+
+export default function temp() {
+  return <TagBox stage={1} />;
+}