i read bad ultrakill reviews so you dont have to

src/App.css

@@ -1,8 +1,21 @@
 :root {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* browsers agreeing on stuff challenge (impossible) */
   background-color: #121212;
   font-family: monospace;
   overflow-x: hidden;
   color: pink;
+
+}
+
+.actualreviewdiv {
+  overflow-y: scroll;
+  height: 18em;
 }
 
 .header {
@@ -30,19 +43,23 @@
   margin: 0.5em;
 }
 
+.cardchild:hover::-webkit-scrollbar {
+  display: none;
+}
+
+.cardchild {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */
+
 .cardchild {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  /* browsers agreeing on stuff challenge (impossible) */
   cursor: default;
   background-color: #272525;
   border-radius: 5%;
-  margin: 1em 1em .5em .5em;
-  width: 20em;
+  width: 25em;
+  height: 25em;
   padding: 0.5em 5em 2em 5em;
   transform: translateY(-0em);
   transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
@@ -57,6 +74,7 @@
   transform: translateY(-0.3em);
   transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
 }
+
 .linktree {
   display: flex;
   justify-content: space-around;
@@ -66,6 +84,20 @@
   cursor: pointer;
 }
 
+.singlereview {
+  display: flex;
+  align-items: center;
+}
+
+.reviewinfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.reviewname {
+  font-weight: bolder;
+}
+
 .parent {
   width: 100%;
   height: 100%;
@@ -135,10 +167,12 @@
   0% {
     max-width: 10em;
   }
+
   50% {
     width: 10.5em;
     max-width: 10.5em;
   }
+
   100% {
     max-width: 10em;
   }

src/App.tsx

@@ -2,6 +2,7 @@ import './App.css'
 import HoverComponent from './components/name.tsx'
 import AdvancedBr from './components/comps.tsx'
 import { createSignal } from 'solid-js';
+import Reviews from './components/api.tsx';
 function App() {
   function remov() {
     for (let i = 0; i < document.styleSheets.length; i++) {
@@ -68,7 +69,7 @@ function App() {
           opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
         }} class='cardchild'>
           <h1>reviews</h1>
-          {/* <Review/> */}
+          <Reviews/>
         </div>
       </div>
       <AdvancedBr count={10} />

src/components/api.tsx

@@ -0,0 +1,66 @@
+import { createSignal, onMount } from "solid-js"
+
+interface Review {
+    reviewID: number;
+    discordID: string;
+    reviewText: string;
+    timestamp: string;
+}
+
+interface NeoReview extends Review {
+    global_name: string;
+    username: string
+}
+
+export default function Reviews() {
+    const [reviews, setReviews] = createSignal<NeoReview[]>([]);
+    onMount(() => {
+        fetch("https://api.review.exhq.dev/getreviews")
+            .then(response => response.json())
+            .then((data: Review[]) => {
+                const promises = data.map(review => (
+                    fetch(`https://discordlookup.mesalytic.moe/v1/user/${review.discordID}`)
+                        .then(response => response.json())
+                        .then(user => ({
+                            ...review,
+                            global_name: user.global_name,
+                            username: user.username
+                        }))
+                ));
+
+                Promise.all(promises)
+                    .then(yeah => {
+                        setReviews(yeah);
+                    })
+                    .catch(error => console.error("Error fetching Discord user data:", error));
+            })
+            .catch(error => console.error("Error fetching reviews:", error));
+    });
+
+
+    return (
+        <div class="actualreviewdiv">
+            {reviews().length > 0 ? (
+                reviews().reverse().map((review) => (
+                    <div>
+                        <SingleReview {...review} />
+                    </div>
+                ))
+            ) : (
+                <div>Loading reviews...</div>
+            )}
+        </div>
+    )
+}
+
+
+function SingleReview(props: NeoReview) {
+    console.log(props.global_name)
+    return <div class="singlereview">
+        <img src={`https://dp.nea.moe/avatar/${props.discordID}.png`} />
+        <div class="reviewinfo">
+            <div class="reviewname"> {props.global_name === null? props.username : props.global_name} </div>
+            <div class="reviewtext"> {props.reviewText}</div>
+        </div>
+    </div>
+}

src/components/name.jsx

@@ -1,42 +0,0 @@
-import { createSignal, onCleanup } from "solid-js";
-import { removethething } from "./utils";
-
-function HoverComponent() {
-  let timerId;
-
-  const [name, setname] = createSignal(true)
-
-  const startTimer = () => {
-    timerId = setTimeout(() => {
-      setname(!name())
-    }, 3000);
-  };
-
-  const clearTimer = () => {
-    if (timerId) {
-      clearTimeout(timerId);
-      timerId = null;
-    }
-  };
-  
-  const handleMouseEnter = () => {
-    removethething()
-    startTimer();
-  };
-
-  onCleanup(() => {
-    clearTimer();
-  });
-
-  return (
-    <h1
-      className="removethisinstantly"
-      onMouseEnter={handleMouseEnter} 
-      onMouseLeave={clearTimer} 
-    >
-      {name() ? "ECHO" : "exhq"}
-    </h1>
-  );
-}
-
-export default HoverComponent;