From bc187b04467a4a3b3401dad75cfe93aba79490fd Mon Sep 17 00:00:00 2001
From: Rene Roesner <rene.roesner@fjd.de>
Date: Thu, 21 Apr 2022 12:58:18 +0200
Subject: [PATCH] planning#347: Changed resources layout
---
pages/resources/index.tsx | 447 ++++++++++++++++++++------------------
1 file changed, 232 insertions(+), 215 deletions(-)
diff --git a/pages/resources/index.tsx b/pages/resources/index.tsx
index c45197f..0ee97e1 100644
--- a/pages/resources/index.tsx
+++ b/pages/resources/index.tsx
@@ -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>
)
--
GitLab