Move info to component

src/components/AboutMeEntry.tsx

@@ -0,0 +1,26 @@
+import React, {FunctionComponent} from "react";
+
+type Props = {
+    title: string
+    url: string
+    description: string
+}
+
+export const AboutMeEntry: FunctionComponent<Props> = (props: Props) => {
+    return (
+        <div className="feature col">
+            <a href={props.url}>
+                <div
+                    className="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+                    <i className="bi bi-github"></i>
+                </div>
+            </a>
+            <div className="feature col align-items-center justify-content-center">
+                <h3 className="fs-2 text-body-emphasis">{props.title}</h3>
+            </div>
+            <p>
+                {props.description}
+            </p>
+        </div>
+    )
+}

src/components/Github.tsx

@@ -0,0 +1,11 @@
+import {AboutMeEntry} from "@/components/AboutMeEntry";
+import {FunctionComponent} from "react";
+
+
+export const Github: FunctionComponent<any> = () => {
+    return <AboutMeEntry
+        url="https://github.com/pgrondek"
+        title="Github"
+        description="My main public git repository"
+    />
+}

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.css'
+import {Github} from "@/components/Github";
 
 export default function Home() {
     return (
@@ -6,29 +7,9 @@ export default function Home() {
             <div className="container">
                 <h2 className="pb-2 border-bottom">My stuff</h2>
                 <div className="row g-4 py-5 row-cols-1 row-cols-lg-3">
-                    <div className="feature col">
-                        <a href="https://github.com/pgrondek">
-                            <div
-                                className="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
-                                <i className="bi bi-github"></i>
-                            </div>
-                        </a>
-                        <div className="feature col align-items-center justify-content-center">
-                            <h3 className="fs-2 text-body-emphasis">Github</h3>
-                        </div>
-                        <p>
-                            My main public git repositories with notable repos:
-                            <ul>
-                                <li><a href="https://github.com/pgrondek/ansible">ansible</a> - playbook for my homelab</li>
-                                <li><a href="https://github.com/pgrondek/Prusa-Firmware">Prusa-Firmware</a> - slightly modified firmware for my 3d printer</li>
-                                <li><a href="https://github.com/pgrondek/dwm">dwm</a> - my customized version of dwm</li>
-                            </ul>
-                        </p>
-
+                    <Github/>
                 </div>
             </div>
-            </div>
-
         </main>
     )
 }