GitHub link (#82)

src/app/page.tsx

@@ -2,6 +2,7 @@
 import {Suspense, lazy, useState} from 'react';
 import {PlayIcon} from '@/components/icons';
 import {Button} from '@/components/ui/Button';
+import {GitHubLink} from '@/components/ui/GitHubLink';
 import {SynthPageSkeleton} from '@/components/pages/SynthPage/SynthPageSkeleton';
 
 const SynthPage = lazy(async () => {
@@ -22,6 +23,9 @@ export default function IndexPage() {
         <Button size='large' aria-label='Launch' onClick={launch}>
           <PlayIcon />
         </Button>
+        <div className='absolute bottom-2'>
+          <GitHubLink />
+        </div>
       </div>
     );
   }

src/components/pages/SynthPage/SynthPageLayout.tsx

@@ -1,3 +1,5 @@
+import {GitHubLink} from '@/components/ui/GitHubLink';
+
 type SynthPageLayoutProps = {
   topPanel?: React.ReactNode;
   children: [React.ReactNode, React.ReactNode];
@@ -15,6 +17,9 @@ export function SynthPageLayout({topPanel, children}: SynthPageLayoutProps) {
       <div className='flex w-full items-center justify-center px-4 pt-16'>
         {children[1]}
       </div>
+      <div className='absolute bottom-2'>
+        <GitHubLink />
+      </div>
     </div>
   );
 }

src/components/ui/GitHubLink.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link';
+import {GitHubLogoIcon} from '@radix-ui/react-icons';
+
+export function GitHubLink() {
+  return (
+    <Link
+      href='https://github.com/satelllte/adsr'
+      target='_blank'
+      className='flex items-center'
+    >
+      <GitHubLogoIcon className='mr-1 inline h-4 w-4' />
+      <span>satelllte/adsr</span>
+    </Link>
+  );
+}