Change Applications to Workspaces

This commit is contained in:
Chris Hunt
2023-01-19 11:18:02 +00:00
parent 3b61336e30
commit 8a4c513331
11 changed files with 186 additions and 190 deletions

View File

@@ -1,30 +0,0 @@
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 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">
<img className="w-[50px] max-h-[66px]" src={ 'icons/' + app.image_src} />
</div>
<div className="kasmcard-detail settingPad">
<h5 className="text-base">{ app.friendly_name }</h5>
<p className="text-xs opacity-50">{ app.categories && app.categories[0] || 'Unknown' }</p>
</div>
</div>
</div>
</div>
)
}
export default App

View File

@@ -0,0 +1,30 @@
import { useRouter } from 'next/router'
function Workspace({ Component, pageProps, workspace }) {
const router = useRouter()
const viewexample = (workspace) => {
router.push({
pathname: '/new/[workspace]',
query: { workspace: btoa(workspace.name)}
})
}
return (
<div onClick={() => viewexample(workspace)} 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">
<img className="w-[50px] max-h-[66px]" src={ 'icons/' + workspace.image_src} />
</div>
<div className="kasmcard-detail settingPad">
<h5 className="text-base">{ workspace.friendly_name }</h5>
<p className="text-xs opacity-50">{ workspace.categories && workspace.categories[0] || 'Unknown' }</p>
</div>
</div>
</div>
</div>
)
}
export default Workspace

View File

@@ -23,38 +23,36 @@ export default function Header({ searchText, changeSearch }) {
<div className='relative z-10'>
<div className="text-3xl">{process.env.name}</div>
<div className="text-sm uppercase w-full flex justify-between">
<span className='opacity-70'>A</span>
<span className='opacity-70'>p</span>
<span className='opacity-70'>p</span>
<span className='opacity-70'>l</span>
<span className='opacity-70'>i</span>
<span className='opacity-70'>c</span>
<span className='opacity-70'>a</span>
<span className='opacity-70'>t</span>
<span className='opacity-70'>i</span>
<span className='opacity-70'>W</span>
<span className='opacity-70'>o</span>
<span className='opacity-70'>n</span>
<span className='opacity-70'>r</span>
<span className='opacity-70'>k</span>
<span className='opacity-70'>s</span>
<span className='opacity-70'>p</span>
<span className='opacity-70'>a</span>
<span className='opacity-70'>c</span>
<span className='opacity-70'>e</span>
<span>&nbsp;</span>
<span className='opacity-40'>D</span>
<span className='opacity-40'>a</span>
<span className='opacity-40'>t</span>
<span className='opacity-40'>a</span>
<span className='opacity-40'>b</span>
<span className='opacity-40'>a</span>
<span className='opacity-40'>s</span>
<span className='opacity-40'>R</span>
<span className='opacity-40'>e</span>
<span className='opacity-40'>g</span>
<span className='opacity-40'>i</span>
<span className='opacity-40'>s</span>
<span className='opacity-40'>t</span>
<span className='opacity-40'>r</span>
<span className='opacity-40'>y</span>
</div>
</div>
<nav className='relative z-10 mx-12'>
<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.startsWith("/addapp") ? ' bg-black/10 border-white/30' : ' border-transparent')}>Add App</Link>
<Link href="/new" className={'p-4 inline-block rounded-full border border-solid' + (router.pathname.startsWith("/new") ? ' bg-black/10 border-white/30' : ' border-transparent')}>New</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'>
<input
name="search"
className='bg-transparent shadow-inner text-lg font-light w-full p-4 placeholder:text-white/40'
placeholder='Search for application'
placeholder='Search for workspace'
type="text"
value={searchText}
onChange={changeSearch}
@@ -64,7 +62,7 @@ export default function Header({ searchText, changeSearch }) {
</div>
<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>
<span className="mr-3">Workspace 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>
</header >