Some quality of life changes

src/renderer/App.css

@@ -82,3 +82,27 @@ h3, h4, h5 {
 .gcui-window-button:hover {
   background-color: var(--main-hover-color);
 }
+.gcui-recommend-fragment {
+  padding: 10px;
+  background-size: cover;
+  background-color: rgba(0, 0, 0, 0.5);
+  background-blend-mode: multiply;
+  display: inline-flex;
+  flex-direction: column;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+.gcui-fragmented-p {
+  font-size: 15pt;
+  font-weight: bold;
+  user-select: none;
+}
+.gcui-image-generic {
+  width: 30px;
+  height: 30px;
+  display: block;
+  user-select: none;
+  image-rendering: optimizeQuality;
+  image-resolution: 1;
+  object-fit: cover;
+}

src/renderer/modules/api/SettingsParsingAPI.ts

@@ -59,7 +59,7 @@ export default class GCSettingsAPI {
         return this.language;
     }
 
-    public getHomePageRepository(): String {
+    public getHomePageRepository(): RequestInfo {
         return this.homePageRepository;
     }
 

src/renderer/pages/Home.tsx

@@ -1,19 +1,33 @@
+import React, { useState, useEffect } from 'react';
 import GCSettingsAPI from "../modules/api/SettingsParsingAPI";
 
 export default function Home() {
-  const settingsAPI = new GCSettingsAPI();
-  console.log(`${settingsAPI.getUILanguage()}`)
+  const [metadata, setMetadata] = useState([]);
+
+  useEffect(() => {
+    const settingsAPI = new GCSettingsAPI();
+    const homePageRepository = settingsAPI.getHomePageRepository();
+
+    fetch(homePageRepository)
+      .then(res => res.json())
+      .then(data => {
+        setMetadata(data.items); // Set metadata to data.items
+      })
+      .catch(error => {
+        console.error('Error fetching metadata:', error);
+      });
+  }, []); // Empty dependency array ensures this effect runs only once after the component mounts
+
   return (
     <div>
       <h1>Welcome back!</h1>
-      <h3>
-        language: {settingsAPI.getUILanguage()}
-        <br></br>
-        homeURL: {settingsAPI.getHomePageRepository()}
-        <br></br>
-        styleURL: {settingsAPI.getStyleURL()}
-      </h3>
+      {metadata.map(metadataItem => (
+        <div className='gcui-recommend-fragment' style={{backgroundImage: `url(${metadataItem.banner})`}}>
+          <img className='gcui-image-generic' src={metadataItem.banner}></img>
+          <p className='gcui-fragmented-p'>{metadataItem.name.length > 13 ? `${metadataItem.name.substring(0, 13)}...` : metadataItem.name}</p>
+          {/* Render other metadata properties here */}
+        </div>
+      ))}
     </div>
   );
 }
-