Make registry more responsive

Add dynamic route for clickable tiles
Make copy url notification instead of alert
Add achitecture to details

site/components/App.js

@@ -1,6 +1,17 @@
+import { useRouter } from 'next/router'
+
 function App({ Component, pageProps, app }) {
+    const router = useRouter()
+
+    const viewexample = (app) => {
+        router.push({
+            pathname: '/addapp/[app]',
+            query: { app: btoa(app.name)}
+        })
+    }
+    
     return (
-        <div className="w-[245px] h-[88px] transition-all relative cursor-pointer group flex p-2 items-center justify-center bg-slate-100/90 dark:bg-slate-900/90 shadow rounded hover:shadow-xl hover:bg-gradient-to-r hover:from-slate-900 hover:to-cyan-800 hover:text-white">
+        <div onClick={() => viewexample(app)} className="w-[245px] h-[88px] transition-all relative cursor-pointer group flex p-2 items-center justify-center bg-slate-100/90 dark:bg-slate-900/90 shadow rounded hover:shadow-xl hover:bg-gradient-to-r hover:from-slate-900 hover:to-cyan-800 hover:text-white">
             <div className="w-full h-full">
                 <div className="show-grid flex h-full items-center">
                     <div className="kasmcard-img flex h-full mx-4 items-center justify-center">

site/components/header.js

@@ -1,6 +1,7 @@
 import Bubbles from '../components/Bubbles'
 import Link from 'next/link'
 import { useRouter } from "next/router";
+import { NotificationManager } from 'react-notifications';
 
 export default function Header({ searchText, changeSearch }) {
 
@@ -11,13 +12,13 @@ export default function Header({ searchText, changeSearch }) {
     textField.select()
     document.execCommand('copy')
     textField.remove()
-    alert('URL copied to clipboard')
+    NotificationManager.info('URL successfully copied to clipboard', 'Copy URL', 4000);
   }
   const listUrl = process.env.listUrl;
   const router = useRouter();
 
   return (
-    <header className="relative font-light overflow-hidden bg-gradient-to-tr from-slate-900 to-cyan-800 p-32 py-8 text-white flex justify-between items-center">
+    <header className="relative font-light overflow-hidden bg-gradient-to-tr from-slate-900 to-cyan-800 p-8 xl:px-32 text-white gap-5 md:gap-0 flex flex-wrap justify-center items-center">
       <Bubbles />
       <div className='relative z-10'>
         <div className="text-3xl">{process.env.name}</div>
@@ -45,8 +46,8 @@ export default function Header({ searchText, changeSearch }) {
         </div>
       </div>
       <nav className='relative z-10 mx-12'>
-        <Link href="/" className={'p-4 rounded-full border border-solid' + (router.pathname == "/" ? ' border-white/30' : ' border-transparent')}>Library</Link>
-        <Link href="/addapp" className={'p-4 rounded-full border border-solid' + (router.pathname == "/addapp" ? ' bg-black/10 border-white/30' : ' border-transparent')}>Add App</Link>
+        <Link href="/" className={'p-4 inline-block rounded-full border border-solid' + (router.pathname == "/" ? ' border-white/30' : ' border-transparent')}>Library</Link>
+        <Link href="/addapp" className={'p-4 inline-block rounded-full border border-solid' + (router.pathname == "/addapp" ? ' bg-black/10 border-white/30' : ' border-transparent')}>Add App</Link>
       </nav>
       <div className="grow flex justify-center relative z-10">
         <div className='bg-black/10 shadow border border-1 border-white/30 rounded flex w-full max-w-md'>
@@ -62,7 +63,7 @@ export default function Header({ searchText, changeSearch }) {
         </div>
 
       </div>
-      <button className='p-4 relative z-10 px-5 bg-emerald-600 m-2 rounded items-center text-white/70 flex cursor-pointer' onClick={() => { copyToClipboard() }}>
+      <button className='p-4 relative z-10 px-5 bg-cyan-700 border-t border-white/20 border-solid hover:bg-slate-900 transition shadow-lg m-2 rounded items-center text-white/70 flex cursor-pointer' onClick={() => { copyToClipboard() }}>
         <span className="mr-3">App Registry Link</span>
         <svg style={{ height: '14px', fill: '#fff' }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 0c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224zM64 160c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64H64V224h64V160H64z" /></svg>
       </button>

site/components/layout.js

@@ -2,6 +2,8 @@
 
 import Header from './header'
 import Footer from './footer'
+import 'react-notifications/lib/notifications.css';
+import { NotificationContainer } from 'react-notifications';
 
 export default function Layout({ children, searchText, changeSearch }) {
   return (
@@ -9,6 +11,7 @@ export default function Layout({ children, searchText, changeSearch }) {
       <Header searchText={searchText} changeSearch={changeSearch} />
       <main>{children}</main>
       <Footer />
+      <NotificationContainer/>
     </>
   )
 }