Skip to content
Snippets Groups Projects
Commit bc187b04 authored by René Rösner's avatar René Rösner
Browse files

planning#347: Changed resources layout

parent 32dc1a47
No related branches found
No related tags found
1 merge request!4planning#347: Abschluss MVP Entwicklungsportal
Hide whitespace changes
Inline Side-by-side
pages/resources/index.tsx
+ 232
− 215
View file @ bc187b04
......@@ -5,239 +5,256 @@ import { IconArrowBigRight, IconSearch } from '@tabler/icons'
export default function ({ services }) {
let filters = [
{
label: 'Art des Dienstes',
id: 'type',
options: [{
label: 'Plattformen',
id: 'platform',
},{
label: 'Basisdienste',
id: '',
value: '',
},{
label: 'Software',
id: '',
value: '',
},{
label: 'APIs',
id: '',
value: '',
}]
},
{
label: 'Use Cases',
id: 'use-case',
options: [{
label: 'Bezahlsystem',
id: 'platform',
},{
label: 'Übertragungssystem',
id: '',
value: '',
},{
label: 'Referenzarchitektur',
id: '',
value: '',
}]
},
{
label: 'Region',
id: 'region',
options: [{
label: 'Niedersachsen',
id: 'platform',
},{
label: 'Baden-Württemberg',
id: '',
value: '',
},{
label: 'Bayern',
id: '',
value: '',
},{
label: 'Thüringen',
id: '',
value: '',
},{
label: 'Hessen',
id: '',
value: '',
},{
label: 'Nordrhein-Westfalen',
id: '',
value: '',
}]
},
{
label: 'Status',
id: 'status',
options: [{
label: 'Produktiv',
id: 'production',
},{
label: 'Beta',
id: '',
value: '',
},{
label: 'In Entwicklung',
id: '',
value: '',
}]
}
]
filters = []
// let filters = [
// {
// label: 'Art des Dienstes',
// id: 'type',
// options: [{
// label: 'Plattformen',
// id: 'platform',
// },{
// label: 'Basisdienste',
// id: '',
// value: '',
// },{
// label: 'Software',
// id: '',
// value: '',
// },{
// label: 'APIs',
// id: '',
// value: '',
// }]
// },
// {
// label: 'Use Cases',
// id: 'use-case',
// options: [{
// label: 'Bezahlsystem',
// id: 'platform',
// },{
// label: 'Übertragungssystem',
// id: '',
// value: '',
// },{
// label: 'Referenzarchitektur',
// id: '',
// value: '',
// }]
// },
// {
// label: 'Region',
// id: 'region',
// options: [{
// label: 'Niedersachsen',
// id: 'platform',
// },{
// label: 'Baden-Württemberg',
// id: '',
// value: '',
// },{
// label: 'Bayern',
// id: '',
// value: '',
// },{
// label: 'Thüringen',
// id: '',
// value: '',
// },{
// label: 'Hessen',
// id: '',
// value: '',
// },{
// label: 'Nordrhein-Westfalen',
// id: '',
// value: '',
// }]
// },
// {
// label: 'Status',
// id: 'status',
// options: [{
// label: 'Produktiv',
// id: 'production',
// },{
// label: 'Beta',
// id: '',
// value: '',
// },{
// label: 'In Entwicklung',
// id: '',
// value: '',
// }]
// }
// ]
// filters = []
return (
<div className="py-10">
<div className="max-w-3xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
<header
className={
'lg:col-start-3 xl:col-start-3 lg:col-span-9 xl:col-span-9'
}
>
<h1>
<span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
<span className="block text-gray-900">Verfügbare Plattformen & Basisdienste</span>
</span>
</h1>
</header>
<div className="hidden lg:block lg:col-span-3 xl:col-span-2">
<nav
aria-label="Sidebar"
className="hidden sticky top-4 divide-y divide-gray-300"
<div className='container'>
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6 "
>
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto">
<div className="hidden md:block md:ml-10 md:space-x-10 flex">
<Link href={'/'} passHref>
<a
className={'text-lg font-bold text-yellow-400 hover:text-gray-900'}
>
Föderales Entwicklungsportal
</a>
</Link>
</div>
</div>
</div>
</nav>
<div className="py-10">
<div className="max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
<header
className={
'lg:col-start-3 xl:col-start-3 lg:col-span-9 xl:col-span-9'
}
>
{filters.map((filter) => (
<div className="pt-10 mt-10" key={filter.id}>
<p
className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
id={`${filter.id}-headline`}
>
{filter.label}
</p>
<div
className="mt-3 space-y-2"
aria-labelledby={`${filter.id}-headline`}
>
{filter.options.map((option) => (
<div key={option.value} className="flex items-center">
<input
id={`${filter.id}-${option.id}`}
name={`${filter.id}[]`}
defaultValue={option.value}
type="checkbox"
className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
/>
<label
htmlFor={`${filter.id}-${option.id}`}
className="ml-3 text-sm text-gray-500"
>
{option.label}
</label>
</div>
))}
<h1>
<span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
<span className="block text-gray-900">Verfügbare Plattformen & Basisdienste</span>
</span>
</h1>
</header>
{/* <div className="hidden lg:block lg:col-span-3 xl:col-span-2">
<nav
aria-label="Sidebar"
className="hidden sticky top-4 divide-y divide-gray-300"
>
{filters.map((filter) => (
<div className="pt-10 mt-10" key={filter.id}>
<p
className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
id={`${filter.id}-headline`}
>
{filter.label}
</p>
<div
className="mt-3 space-y-2"
aria-labelledby={`${filter.id}-headline`}
>
{filter.options.map((option) => (
<div key={option.value} className="flex items-center">
<input
id={`${filter.id}-${option.id}`}
name={`${filter.id}[]`}
defaultValue={option.value}
type="checkbox"
className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
/>
<label
htmlFor={`${filter.id}-${option.id}`}
className="ml-3 text-sm text-gray-500"
>
{option.label}
</label>
</div>
))}
</div>
</div>
</div>
))}
</nav>
</div>
<main className="lg:col-span-9 xl:col-span-9">
{/*
<div className="px-4 sm:px-0">
<div className="w-full">
<label htmlFor="search" className="sr-only">
Durchsuchen
</label>
<div className="relative">
<div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
<IconSearch
className="h-5 w-5 text-gray-400"
aria-hidden="true"
))}
</nav>
</div> */}
<main className="lg:col-start-3 xl:col-start-3 lg:col-span-9 xl:col-span-9'">
{/*
<div className="px-4 sm:px-0">
<div className="w-full">
<label htmlFor="search" className="sr-only">
Durchsuchen
</label>
<div className="relative">
<div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
<IconSearch
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</div>
<input
id="search"
name="search"
className="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-rose-500 focus:border-rose-500 sm:text-sm"
placeholder="Search"
type="search"
/>
</div>
<input
id="search"
name="search"
className="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-rose-500 focus:border-rose-500 sm:text-sm"
placeholder="Search"
type="search"
/>
</div>
</div>
</div>
*/}
<div className="mt-4">
<h1 className="sr-only">Gelistete Services</h1>
<ul role="list" className="space-y-4">
{services.map((service, key) => (
<li
key={key}
className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
>
<div aria-labelledby={'service-' + key}>
<div>
<div className="flex space-x-3">
<div className="flex-shrink-0">
<img
className="h-10 w-10"
src={service.logo.fields.file.url}
alt={service.logo.fields.name}
/>
*/}
<div className="mt-4">
<h1 className="sr-only">Gelistete Services</h1>
<ul role="list" className="space-y-4">
{services.map((service, key) => (
<li
key={key}
className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
>
<div aria-labelledby={'service-' + key}>
<div>
<div className="flex space-x-3">
<div className="flex-shrink-0">
<img
className="h-10 w-10"
src={service.logo.fields.file.url}
alt={service.logo.fields.name}
/>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-gray-900">
<Link
href={`/suites/${service.slug}`}
passHref
>
<a
href={service.developer.fields.link}
className="hover:underline"
>
{service.name}
</a>
</Link>
</p>
<p className="text-sm text-gray-500">
entwickelt durch {service.developer.fields.name}
</p>
</div>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-gray-900">
</div>
<div
className="mt-2 text-sm text-gray-700 space-y-4"
dangerouslySetInnerHTML={{
__html: documentToHtmlString(service.shortDescription),
}}
/>
<div className="mt-6 flex justify-end space-x-8">
<div className="flex text-sm">
<span className="inline-flex items-center text-sm">
<Link
href={`/suites/${service.slug}`}
passHref
>
<a
href={service.developer.fields.link}
className="hover:underline"
>
{service.name}
<a className="inline-flex space-x-2 text-gray-400 hover:text-gray-800">
<span className="font-medium">Mehr</span>
<IconArrowBigRight
className="h-5 w-5"
aria-hidden="true"
/>
</a>
</Link>
</p>
<p className="text-sm text-gray-500">
entwickelt durch {service.developer.fields.name}
</p>
</span>
</div>
</div>
</div>
<div
className="mt-2 text-sm text-gray-700 space-y-4"
dangerouslySetInnerHTML={{
__html: documentToHtmlString(service.shortDescription),
}}
/>
<div className="mt-6 flex justify-end space-x-8">
<div className="flex text-sm">
<span className="inline-flex items-center text-sm">
<Link
href={`/suites/${service.slug}`}
passHref
>
<a className="inline-flex space-x-2 text-gray-400 hover:text-gray-800">
<span className="font-medium">Mehr</span>
<IconArrowBigRight
className="h-5 w-5"
aria-hidden="true"
/>
</a>
</Link>
</span>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
</main>
</li>
))}
</ul>
</div>
</main>
</div>
</div>
</div>
)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment