98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { Link, RouteComponentProps, RouterProps } from '@reach/router';
|
|
import { ChevronRightIcon } from '@heroicons/react/solid';
|
|
import { XCircleIcon } from '@heroicons/react/outline';
|
|
import { Tabs } from 'src/components';
|
|
import { GeneralTab } from './GeneralTab';
|
|
import { Secrets } from './Secrets';
|
|
import { Advanced } from './Advanced';
|
|
|
|
type AppSingleProps = RouteComponentProps & RouterProps;
|
|
|
|
const pages = [
|
|
{ name: 'Apps', to: '/apps', current: true },
|
|
{ name: 'Nextcloud', to: '', current: false },
|
|
];
|
|
|
|
const tabs = [
|
|
{ name: 'General', component: <GeneralTab /> },
|
|
{ name: 'Secrets & Passwords', component: <Secrets /> },
|
|
{ name: 'Advanced Configuration', component: <Advanced /> },
|
|
];
|
|
|
|
export const AppSingle: React.FC<AppSingleProps> = () => {
|
|
return (
|
|
<>
|
|
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
|
|
<nav className="flex" aria-label="Breadcrumb">
|
|
<ol className="flex items-center space-x-4">
|
|
<li>
|
|
<div className="flex items-center">
|
|
<Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
|
<span>Dashboard</span>
|
|
</Link>
|
|
</div>
|
|
</li>
|
|
{pages.map((page) => (
|
|
<li key={page.name}>
|
|
<div className="flex items-center">
|
|
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
|
|
<Link
|
|
to={page.to}
|
|
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
|
aria-current={page.current ? 'page' : undefined}
|
|
>
|
|
{page.name}
|
|
</Link>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8">
|
|
<div className="bg-white overflow-hidden shadow rounded-sm mb-5">
|
|
<div className="px-4 py-5 sm:p-6 flex justify-between items-center">
|
|
<div className="mr-4 flex items-center">
|
|
<img
|
|
className="h-24 w-24 rounded-md overflow-hidden mr-4"
|
|
src="./../assets/nextcloud.svg"
|
|
alt="Nextcloud"
|
|
/>
|
|
|
|
<div>
|
|
<h2 className="text-2xl leading-8 font-bold">Nextcloud</h2>
|
|
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<button
|
|
type="button"
|
|
className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
|
|
>
|
|
<XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
|
|
Disable App
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
|
|
>
|
|
View Documentation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white shadow rounded-sm">
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<Tabs tabs={tabs} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|