first sample of a card

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "fs-extra": "^11.2.0",
+    "html-react-parser": "^5.1.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

src/components/Card/index.js

@@ -0,0 +1,121 @@
+import "./styles.css";
+
+import parse from "html-react-parser";
+
+import Heading from "../Heading";
+
+const Card = ({ props }) => {
+  const data = {
+    name: "Archetype : Maitre des lames",
+    type: "subclass",
+    img: "/icons/magic/unholy/silhouette-robe-evil-power.webp",
+    effects: [],
+    folder: "II39fHNttX88LW3a",
+    flags: {
+      core: {},
+    },
+    system: {
+      description: {
+        value: `<p>Les maitre des lames sont des assassins hors pairs qui peuvent terminer un combat avant qu'il ne soit commencé.</p>`,
+        chat: "",
+        unidentified: "",
+      },
+      source: {},
+      identifier: "archetype-mdl",
+      classIdentifier: "ninja",
+      advancement: [
+        {
+          _id: "y66ssr2gbt42t1s7",
+          type: "ItemGrant",
+          configuration: {
+            items: ["Item.ZJIm0Tl0sWeYD7e5"],
+            optional: false,
+            spell: null,
+          },
+          value: {},
+          level: 9,
+          title: "Faire taire",
+          icon: "icons/skills/melee/maneuver-greatsword-yellow.webp",
+        },
+        {
+          _id: "bnoflj0sdhpwny6i",
+          type: "ItemGrant",
+          configuration: {
+            items: ["Item.hqmilMXqdYRf2Am3", "Item.6jPDVnDLTjUS5UTg"],
+            optional: false,
+            spell: null,
+          },
+          value: {},
+          level: 1,
+          title: "Compétence",
+          icon: "icons/skills/wounds/bone-broken-knee-beam.webp",
+        },
+        {
+          _id: "Jj9Tg3NfE7ZVMlDZ",
+          type: "ItemGrant",
+          configuration: {
+            items: ["Item.a3UEBd04yOr1Qw2r"],
+            optional: false,
+            spell: null,
+          },
+          value: {},
+          level: 3,
+          title: "Compétence",
+          icon: "icons/skills/targeting/crosshair-ringed-gray.webp",
+        },
+        {
+          _id: "dYwNzw2lQyjKUEr0",
+          type: "ItemGrant",
+          configuration: {
+            items: ["Item.ginieiw5u4LUhTXX"],
+            optional: false,
+            spell: null,
+          },
+          value: {},
+          level: 6,
+          title: "Compétence",
+          icon: "icons/skills/movement/arrow-upward-yellow.webp",
+        },
+      ],
+      spellcasting: {
+        progression: "artificer",
+        ability: "",
+      },
+    },
+    ownership: {
+      default: 2,
+      rnDWxiLHx5q6fRFC: 3,
+    },
+    _stats: {
+      systemId: "dnd5e",
+      systemVersion: "2.4.0",
+      coreVersion: "11.315",
+      createdTime: 1702230824135,
+      modifiedTime: 1702294376156,
+      lastModifiedBy: "rnDWxiLHx5q6fRFC",
+    },
+    _id: "06OOkI1l8ogebo2N",
+    sort: 0,
+    _key: "!items!06OOkI1l8ogebo2N",
+    subItems: [],
+  };
+  return (
+    <div className="card">
+      <div className="cardHeader">
+        <div className="cardImg">
+          <img src={data?.img} alt={data?.name} />
+        </div>
+        <Heading As="h3" className="cardHeading">
+          {data?.name}
+        </Heading>
+      </div>
+      <div className="cardBody">
+        <div className="cardDescription">
+          {parse(data?.system?.description?.value)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

src/components/Card/styles.css

@@ -0,0 +1,35 @@
+.card {
+  padding: 20px;
+  max-width: 30rem;
+  background-color: var(--hanzo-gan);
+  border-radius: 10px;
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 2rem;
+
+}
+
+.cardImg {
+  max-height: 30rem;
+  border-radius: 10px;
+}
+
+.cardImg img {
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+h3.cardHeading {
+  font-size: 2em;
+  color: var(--classy-base);
+}
+
+.cardBody {}
+
+.cardDescription {
+  color: var(--classy-base);
+}

src/index.css

@@ -161,5 +161,5 @@ body {
   /* Base : équivalent 16px */
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
-  color: var(--color-primary);
+  color: var(--classy-dark);
 }

src/pages/Character/index.js

@@ -37,6 +37,7 @@ const Character = () => {
     if (subItems?.length === 0) {
       return subItems?.length !== 0 ? (
         <h4>
+          <img src={subItems?.img} alt={subItems?.name} />
           {subItems?._id} - {subItems?.name}
         </h4>
       ) : (
@@ -52,6 +53,7 @@ const Character = () => {
                   subItem?._key === `!folders!${subItem?._id}` ? "selected" : ""
                 }
               >
+                <img src={subItem?.img} alt={subItem?.name} />
                 {subItem?._id} - {subItem?.name} - {subItem?.folder}
               </h5>
             ) : (

src/pages/Home/index.js

@@ -1,7 +1,13 @@
 import "./styles.css";
 
+import Card from "../../components/Card";
+
 const Home = () => {
-  return <div className="home">home</div>;
+  return (
+    <div className="home">
+      <Card />
+    </div>
+  );
 };
 
 export default Home;