add about page

Author: tariknz

src/frontend/components/Settings/SettingsLayout.tsx

@@ -6,6 +6,7 @@ import { WeatherSettings } from './sections/WeatherSettings';
 import { TrackMapSettings } from './sections/TrackMapSettings';
 import { AdvancedSettings } from './sections/AdvancedSettings';
 import { InputSettings } from './sections/InputSettings';
+import { AboutSettings } from './sections/AboutSettings';
 import { useDashboard } from '@irdashies/context';
 import { useState } from 'react';
 
@@ -97,13 +98,19 @@ export const SettingsLayout = () => {
             </li>
           </ul>
           {/* Advanced settings pushed to bottom */}
-          <div className="mt-auto pt-4 border-t border-slate-700">
+          <div className="mt-auto pt-4 border-t border-slate-700 flex flex-col gap-2">
             <Link
               to="/settings/advanced"
               className={menuItemClass('/advanced')}
             >
               Advanced
             </Link>
+            <Link
+              to="/settings/about"
+              className={menuItemClass('/about')}
+            >
+              About
+            </Link>
           </div>
         </div>
 
@@ -116,6 +123,7 @@ export const SettingsLayout = () => {
             <Route path="map" element={<TrackMapSettings />} />
             <Route path="input" element={<InputSettings />} />
             <Route path="advanced" element={<AdvancedSettings />} />
+            <Route path="about" element={<AboutSettings />} />
             <Route
               path="*"
               element={

src/frontend/components/Settings/sections/AboutSettings.tsx

@@ -0,0 +1,43 @@
+import { GithubLogo, DiscordLogo } from '@phosphor-icons/react';
+
+export const AboutSettings = () => {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h2 className="text-xl font-bold mb-4">About</h2>
+        <p className="text-slate-300">
+          iRacing Dashies is an open-source iRacing Dashboards & Overlays application that helps you customize and enhance your racing experience.
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <h3 className="text-lg font-semibold">Version</h3>
+        <p className="text-slate-300">v0.0.7</p>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <h3 className="text-lg font-semibold">Connect</h3>
+        
+        <a 
+          href="https://github.com/tariknz/irdashies" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
+        >
+          <GithubLogo size={24} weight="bold" />
+          <span>GitHub Repository</span>
+        </a>
+
+        <a 
+          href="https://discord.gg/YMAqduF2Ft" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
+        >
+          <DiscordLogo size={24} weight="bold" />
+          <span>Join our Discord Community</span>
+        </a>
+      </div>
+    </div>
+  );
+};