From a72e2123bf44991e5c83eb6c68b39306ff0c1e9a Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Tue, 15 Oct 2024 23:52:21 -0500
Subject: [PATCH] add frontend work

---
 frontend/src/App.css      | 20 ++++++++++++++
 frontend/src/App.test.tsx |  5 ++++
 frontend/src/App.tsx      | 56 +++++++++++++++++++++++++++++++++++++++
 frontend/src/index.tsx    | 10 +++++++
 4 files changed, 91 insertions(+)
 create mode 100644 frontend/src/App.css
 create mode 100644 frontend/src/App.test.tsx
 create mode 100644 frontend/src/App.tsx
 create mode 100644 frontend/src/index.tsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
new file mode 100644
index 0000000..dacd573
--- /dev/null
+++ b/frontend/src/App.css
@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background-color: #fff;
+  --text-color: #111;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: rgb(20, 20, 20);
+    --text-color: rgb(230, 230, 230);
+  }
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
new file mode 100644
index 0000000..dd62b30
--- /dev/null
+++ b/frontend/src/App.test.tsx
@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest';
+
+test('App', () => {
+  expect(1 + 1).toBe(2);
+});
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..7521fd0
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+
+const Link = (props: JSX.IntrinsicElements['a']) => (
+    <a
+      className="text-pink-500 underline hover:no-underline dark:text-pink-400"
+      {...props}
+    />
+  );
+
+  const Code = (props: JSX.IntrinsicElements['code']) => (
+    <code
+      className="border-1 2py-1 font-light rounded border border-pink-500 bg-neutral-100 px-1 font-mono text-pink-500 dark:border-pink-400 dark:bg-neutral-700 dark:text-pink-400"
+      {...props}
+    />
+  );
+  
+  export default function App() {
+    const [time, setTime] = useState<string | null>(null);
+    const [clientIp, setClientIp] = useState<string | null>(null);
+
+    const refreshData = async () => {
+      try {
+        const response = await fetch('http://localhost:8000/');
+        const data = await response.json();
+        const { time, ip } = data;
+
+        setTime(time);
+        setClientIp(ip);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    // Refresh data on component mount and every 30 seconds
+    useEffect(() => {
+      refreshData();
+
+      const interval = setInterval(() => {
+        refreshData();
+      }, 30 * 1000); 
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <div className="mx-auto my-8 mt-10 w-8/12 rounded border border-gray-200 p-4 shadow-md dark:border-neutral-600 dark:bg-neutral-800 dark:shadow-none">
+        <h1 className="mb-4 text-4xl">LinkPulse</h1>
+        <p className="mx-4 my-2">
+          The current time is: <Code>{time || 'N/A'}</Code>
+        </p>
+        <p className="mx-4 my-2">
+          Your IP address is: <Code>{clientIp || 'N/A'}</Code>
+        </p>
+      </div>
+    );
+  }
\ No newline at end of file
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
new file mode 100644
index 0000000..8c4c9ed
--- /dev/null
+++ b/frontend/src/index.tsx
@@ -0,0 +1,10 @@
+import App from './App.tsx';
+import './App.css';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
\ No newline at end of file