feat: added issue reporting and source code links

ribbon-studios · Jan 26, 2024 · 7e78019 · 7e78019
1 parent d8b3678
commit 7e78019
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Database, ListTodo, LucideIcon } from 'lucide-react';
+import { Bug, Code, Database, ExternalLink, ListTodo, LucideIcon } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from './ui/button';
@@ -21,6 +21,16 @@ const additionalItems: Header.Item[] = [
     label: 'View Data',
     icon: Database,
   },
+  {
+    href: 'https://github.com/rain-cafe/devkit.lgbt/issues',
+    label: 'Report an Issue',
+    icon: Bug,
+  },
+  {
+    href: 'https://github.com/rain-cafe/devkit.lgbt',
+    label: 'Source Code',
+    icon: Code,
+  },
 ];
 
 export function Header({ children }: HeaderProps) {
@@ -46,11 +56,14 @@ export function Header({ children }: HeaderProps) {
         })}
         <div className="flex-1" />
         {additionalItems.map((item, index) => {
+          const isExternal = item.href.startsWith('https');
+
           return (
             <Button key={index} className="flex gap-2 justify-start" size="sm" asChild variant="ghost">
-              <Link to={item.href}>
+              <Link to={item.href} target={isExternal ? '_blank' : undefined}>
                 <item.icon />
-                {item.label}
+                <div className="flex-1">{item.label}</div>
+                {isExternal && <ExternalLink />}
               </Link>
             </Button>
           );

diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx
@@ -9,13 +9,15 @@ export function ErrorPage() {
 
   return (
     <div id="error-page" className="flex flex-col items-center pt-20">
-      <Card>
+      <Card className="sm:max-w-2xl">
         <CardHeader>
           <CardTitle>Oops!</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-2">
           <p>Sorry, an unexpected error has occurred.</p>
-          <code className="flex p-2 rounded-md bg-secondary/50 w-full italic">{error.statusText || error.message}</code>
+          <code className="flex p-2 rounded-md bg-secondary/50 text-pink-400 w-full italic">
+            {error.statusText || error.message}
+          </code>
         </CardContent>
         <CardFooter>
           <Button className="w-full" asChild variant="secondary">