add some test card and api call

src/hooks/useApi.js

@@ -0,0 +1,21 @@
+import axios from "axios";
+import { useState } from "react";
+
+const useApi = () => {
+  const [data, setData] = useState();
+
+  const getFromApi = async (url) => {
+    await axios
+      .get(`${process.env.REACT_APP_API_URL}/${url}`)
+      .then((response) => {
+        return setData(response.data);
+      })
+      .catch((error) => {
+        console.error("Error :", error);
+      });
+  };
+
+  return { getFromApi, data };
+};
+
+export default useApi;

src/pages/Dev/index.js

@@ -0,0 +1,196 @@
+import "./style.css";
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+import Container from "../../layouts/Container";
+import jutsus from "../../data/jutsuData";
+
+const Dev = () => {
+  const [data, setData] = useState();
+  const [_foundryId, setFoundryId] = useState();
+  const [name, setName] = useState();
+  const [img, setImg] = useState();
+  const [level, setLvl] = useState();
+  const [element, setElem] = useState();
+  const [description, setDesc] = useState();
+  const [duration, setDuration] = useState();
+  const [range, setRange] = useState();
+  const [uses, setUses] = useState();
+  const [chakraCost, setChakraCost] = useState();
+  const [actionType, setActionType] = useState();
+  const [criticalThreshold, setCritical] = useState();
+  const [damages, setDamages] = useState();
+  const [scaleFormula, setScaleFormula] = useState();
+  const [statSave, setSave] = useState();
+  const [concentration, setConcentration] = useState();
+  const [scaling, setScaling] = useState();
+
+  useEffect(() => {
+    setFoundryId(data?.foundry_id);
+    setName(data?.name);
+    setImg(data?.img);
+    setLvl(data?.system ? data.system.level : data?.level);
+    setElem();
+    setDesc(data?.system ? data.system.description.value : data?.description);
+    setDuration(data?.duration);
+    setRange(data?.range);
+    setUses();
+    setChakraCost();
+    setActionType();
+    setCritical();
+    setDamages();
+    setScaleFormula();
+    setSave();
+    setConcentration();
+    setScaling();
+  }, [data]);
+
+  //   uses: {
+  //     amount: Number,
+  //     max: Number,
+  //     type: {
+  //       type: mongoose.Schema.Types.ObjectId,
+  //       ref: "restType",
+  //     },
+  //   },
+  //   chakraCost: Number,
+  //   actionType: {
+  //     type: mongoose.Schema.Types.ObjectId,
+  //     ref: "actionType",
+  //   },
+  //   criticalThreshold: String,
+  //   damages: [String],
+  //   scaleFormula: String,
+  //   statSave: {
+  //     targetAbility: {
+  //       type: mongoose.Schema.Types.ObjectId,
+  //       ref: "Ability",
+  //     },
+  //     sourceAbility: {
+  //       type: mongoose.Schema.Types.ObjectId,
+  //       ref: "Ability",
+  //     },
+  //   },
+  //   concentration: Boolean,
+  //   scaling: {
+  //     available: Boolean,
+  //     formula: String,
+  //   },
+  // })
+  const handlePost = (data) => {
+    // You need to modify the JSON so it appears to be the same as the MOdel in DB
+
+    // const body = {
+    //   _foundryId,
+    //   name,
+    //   img,
+    //   level,
+    //   element,
+    //   description,
+    // duration : {units: duration.units, value: duration.value},
+    //   range,
+    //   uses,
+    //   chakraCost,
+    //   actionType,
+    //   criticalThreshold,
+    //   damages,
+    //   scaleFormula,
+    //   statSave,
+    //   concentration,
+    //   scaling,
+    // };
+
+    axios
+      .post("http://localhost:8080/jutsu/new", data)
+      .then((response) => {
+        console.log("Post successful", response.data);
+      })
+      .catch((error) => {
+        console.error("Error posting data:", error);
+      });
+  };
+
+  const handleSaveData = () => {
+    localStorage.setItem("jutsuData", JSON.stringify(data));
+    window.alert("data saved in locale storage");
+  };
+
+  return (
+    <Container>
+      <div className="devDataPicker">
+        {jutsus?.map((el, id) => (
+          <button
+            key={id}
+            onClick={() => {
+              setData(el);
+            }}
+          >
+            {el?.name}
+          </button>
+        ))}
+      </div>
+
+      <div className="devEdit">
+        <h2>id : {data?.foundry_id}</h2>
+        <h3>Item Name</h3>
+        <textarea
+          onChange={(e) => {
+            setName(e.target.value);
+          }}
+          value={name}
+        >
+          {name}
+        </textarea>
+        <textarea
+          onChange={(e) => {
+            setDesc(e.target.value);
+          }}
+          value={description}
+        >
+          {description}
+        </textarea>
+        <input
+          type="number"
+          value={level}
+          onChange={(e) => {
+            setLvl(e.target.value);
+          }}
+        />
+        <div className="devEdit__inputs">
+          <input
+            type="text"
+            value={duration?.value}
+            onChange={(e) => {
+              setDuration({ ...duration, value: e.target.value });
+            }}
+          />
+          <input
+            type="text"
+            value={duration?.units}
+            onChange={(e) => {
+              setDuration({ ...duration, units: e.target.value });
+            }}
+          />
+        </div>
+        <input
+          type="number"
+          value={range}
+          onChange={(e) => {
+            setRange(e.target.value);
+          }}
+        />
+      </div>
+      <button
+        onClick={() => {
+          handlePost(data);
+        }}
+      >
+        Send to Mongo
+      </button>
+      <button onClick={handleSaveData}>Save</button>
+    </Container>
+  );
+};
+
+export default Dev;

src/pages/Dev/style.css

@@ -0,0 +1,22 @@
+.devDataPicker {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.devDataPicker button {
+  width: 18rem;
+  border: none;
+  outline: 0;
+  background-color: var(--hanzo-gan);
+  color: white;
+  border-radius: 4px;
+}
+
+.devEdit {
+  border: 1px solid black;
+  margin: 2rem;
+  padding: 0 2rem;
+}

src/pages/Home/index.js

@@ -1,7 +1,42 @@
 import "./styles.css";
 
+import { useEffect } from "react";
+
+import Container from "../../layouts/Container";
+import useApi from "../../hooks/useApi";
+
 const Home = () => {
-  return <div className="home">home</div>;
+  const { data, getFromApi } = useApi();
+
+  useEffect(() => {
+    getFromApi("clan");
+  }, [getFromApi]);
+
+  if (!data) {
+    return (
+      <div className="home">
+        <h1>Loading...</h1>
+      </div>
+    );
+  } else {
+    return (
+      <div className="home">
+        <Container>
+          {data?.map((el, id) => {
+            return (
+              <div key={id} className="testCard">
+                <div className="section">
+                  {el.img && <img src={el.img} alt="" />}
+                  <h1>{el.name}</h1>
+                </div>
+                <p>{el.description}</p>
+              </div>
+            );
+          })}
+        </Container>
+      </div>
+    );
+  }
 };
 
 export default Home;

src/pages/Home/styles.css

@@ -1 +1,38 @@
-.home {}
+.home {
+  margin: 1rem 0;
+}
+
+.home .container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.testCard {
+  flex: max(300px, 100% / 3 - 30px);
+  padding: 2rem;
+  max-width: 30rem;
+  background-color: var(--classy-base);
+  color: black;
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+.testCard>* {
+  margin-bottom: 10px;
+}
+
+.section>img {
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.section {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 1rem;
+}