feat: add GitHub link with icon to header

Author: luckfunc

src/App.less

@@ -29,6 +29,20 @@
     font-weight: bold;
   }
 
+  .github-link {
+    color: currentColor;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+    margin-left: auto;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   &.dark {
     color: @dark-text;
     background: @dark-secondary-bg;

src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import JsonFormatter from './components/json-formatter';
+import { JsonFormatter, GitHubIcon } from './components';
 import './App.less';
 
 export default function App() {
@@ -16,6 +16,14 @@ export default function App() {
     <div className={`app-container ${isDarkMode ? 'dark' : 'light'}`}>
       <div className={`header ${isDarkMode ? 'dark' : 'light'}`}>
         json-formatter
+        <a
+          href="https://github.com/luckfunc"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="github-link"
+        >
+          <GitHubIcon width={16} height={16} />
+        </a>
       </div>
       <JsonFormatter isDarkMode={isDarkMode} onThemeChange={setIsDarkMode} />
     </div>

src/components/icons/github-icon/index.tsx

@@ -0,0 +1,19 @@
+interface GitHubIconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export default function GithubIcon({ width = 16, height = 16, className }: GitHubIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}

src/components/icons/index.ts

@@ -0,0 +1 @@
+export { default as GitHubIcon } from './github-icon';

src/components/index.ts

@@ -0,0 +1,5 @@
+// Icons
+export * from './icons';
+
+// Components
+export { default as JsonFormatter } from './json-formatter';

src/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}