added references component

src/contents/description_content.jsx

 // content.js
 import React, { useRef } from "react";
 
-import { MainDiv, H1, P, H2, H3, Link, UL } from "../template/template_index";
+import {
+  MainDiv,
+  H1,
+  P,
+  H2,
+  H3,
+  Link,
+  UL,
+  References,
+} from "../template/template_index";
 import { redirect } from "react-router-dom";
 
 const content = [
@@ -288,11 +297,70 @@ const content = [
   },
   { type: H2, props: {}, children: "References" },
   {
-    type: "ol",
-    props: {},
+    type: References,
+    props: {
+      list: [
+        {
+          name: "Living Oceans Foundation - Coral Anatomy",
+          link: "https://www.livingoceansfoundation.org/education/portal/course/coral-anatomy/#coral-anatomy",
+        },
+        {
+          name: "Coral Disease and Health Consortium",
+          link: "https://cdhc.noaa.gov/coral-biology/coral-biology/",
+        },
+        {
+          name: "Living Oceans Foundation - Education Portal",
+          link: "https://www.livingoceansfoundation.org/education/portal/course/",
+        },
+        {
+          name: "Annual Review of Microbiology",
+          link: "https://doi.org/10.1146/annurev-micro-102215-095440",
+        },
+        {
+          name: "Smithsonian Ocean Portal",
+          link: "https://ocean.si.edu/ocean-life/invertebrates/what-coral-coral-polyp-and-zooxanthellae",
+        },
+        {
+          name: "International Journal of Systematic and Evolutionary Microbiology",
+          link: "https://doi.org/10.1099/ijs.0.051490-0",
+        },
+        {
+          name: "Encyclopedie de l'environnement",
+          link: "https://www.encyclopedie-environnement.org/en/life/corals-ocean-engineers-under-threat/",
+        },
+        {
+          name: "Ecology Letters",
+          link: "https://doi.org/10.1111/ele.14266",
+        },
+        {
+          name: "NSF News - Too Much Algae, Too Many Microbes Threaten Coral",
+          link: "https://new.nsf.gov/news/too-much-algae-too-many-microbes-threaten-coral#:~:text=The%20researchers%20theorized%20that%20when",
+        },
+        {
+          name: "Coral Reefs",
+          link: "https://doi.org/10.1007/s00338-017-1640-3",
+        },
+        {
+          name: "Microbiome - Towards enhancing coral heat tolerance",
+          link: "https://doi.org/10.1186/s40168-021-01053-6",
+        },
+        {
+          name: "Microbiome - Lineage-specific symbionts",
+          link: "https://doi.org/10.1186/s40168-023-01653-4",
+        },
+        {
+          name: "Springer Link",
+          link: "https://doi.org/10.1007/s00338-023-02426-z",
+        },
+        {
+          name: " Science Advances",
+          link: "https://doi.org/10.1126/sciadv.aba2498",
+        },
+      ],
+    },
     children: (
       <>
-        <li>
+        {/* <li>
           <a href="https://www.livingoceansfoundation.org/education/portal/course/coral-anatomy/#coral-anatomy">
             https://www.livingoceansfoundation.org/education/portal/course/coral-anatomy/#coral-anatomy
           </a>
@@ -362,7 +430,7 @@ const content = [
           <a href="https://doi.org/10.1126/sciadv.aba2498">
             https://doi.org/10.1126/sciadv.aba2498
           </a>
-        </li>
+        </li> */}
       </>
     ),
   },

src/template/References.css

+.references {
+  color: var(--dark-blue);
+}
+.references p {
+  display: inline;
+  margin-left: 10px;
+  color: var(--dark-blue);
+  font-family: var(--primary-font);
+  font-size: 17px;
+}
+
+.references a {
+  text-decoration: none;
+}
+
+.references li {
+  margin-bottom: 7px;
+}
+.references img {
+  margin-left: 3px;
+  width: 22px;
+  height: 22px;
+  transition: all 0.3s;
+}
+
+.references li:hover img {
+  scale: 1.3;
+}
+
+.references li:hover p {
+  text-decoration: underline;
+}

src/template/References.jsx

+import React from "react";
+import "./References.css";
+
+const References = ({ list }) => {
+  return (
+    <>
+      <ol className="references">
+        {list.map((item, index) => (
+          <li key={index}>
+            <a href={item.link} target="_blank" rel="noopener noreferrer">
+              <p>{item.name}</p>
+              <img src="https://static.igem.wiki/teams/5125/arrow.png"></img>
+            </a>
+          </li>
+        ))}
+      </ol>
+    </>
+  );
+};
+
+export { References };

src/template/template_index.jsx

@@ -19,3 +19,6 @@ export * from "./Img";
 
 // MainDiv
 export * from "./MainDiv";
+
+// References
+export * from "./References";