@public-ui/sample-react 2.1.2 → 2.1.4-alpha.1

package/src/components/handout/basic.tsx

@@ -1,5 +1,4 @@
 import type { KoliBriTableHeaders } from '@public-ui/components';
-import { Bundesanstalt } from '@public-ui/components';
 import type { FC } from 'react';
 import React from 'react';
 import {
@@ -38,6 +37,7 @@ import {
 
 import { getTheme, getThemeName } from '../../shares/store';
 import { getRoot } from '../../shares/react-roots';
+import { TABLE_DATA, type TableDataType } from './table-data';
 
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
@@ -69,10 +69,10 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
-						if (first.montag < second.montag) {
+						if ((first as TableDataType).montag < (second as TableDataType).montag) {
 							return -1;
 						}
-						if (first.montag > second.montag) {
+						if ((first as TableDataType).montag > (second as TableDataType).montag) {
 							return 1;
 						}
 						return 0;
@@ -93,10 +93,10 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
-						if (first.dienstag < second.dienstag) {
+						if ((first as TableDataType).dienstag < (second as TableDataType).dienstag) {
 							return -1;
 						}
-						if (first.dienstag > second.dienstag) {
+						if ((first as TableDataType).dienstag > (second as TableDataType).dienstag) {
 							return 1;
 						}
 						return 0;
@@ -107,9 +107,6 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'mittwoch',
 				label: 'Mittwoch',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
-				},
 				render: (el, cell) => {
 					const renderElement = document.createElement('div');
 					renderElement.setAttribute('role', 'presentation');
@@ -181,548 +178,6 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 		],
 	],
 };
-const TABLE_DATA = [
-	{
-		montag: 'Alex',
-		dienstag: 'Anna',
-		mittwoch: 'Amalia',
-		donnerstag: 'Arthur',
-		freitag: 'Alex',
-		samstag: 'Andrea',
-		sonntag: 'Arnold',
-	},
-	{
-		montag: 'Helena',
-		dienstag: 'Fabian',
-		mittwoch: 'Marie',
-		donnerstag: 'Ben',
-		freitag: 'Marcus',
-		samstag: 'Alex',
-		sonntag: 'Marcus',
-	},
-	{
-		montag: 'Fabian',
-		dienstag: 'Helena',
-		mittwoch: 'Fabian',
-		donnerstag: 'Maya',
-		freitag: 'Ben',
-		samstag: 'Alex',
-		sonntag: 'Helena',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Finn',
-		dienstag: 'Roger',
-		mittwoch: 'Christian',
-		donnerstag: 'Caspar',
-		freitag: 'David',
-		samstag: 'Bernard',
-		sonntag: 'Anna',
-	},
-	{
-		montag: 'Alex',
-		dienstag: 'Anna',
-		mittwoch: 'Amalia',
-		donnerstag: 'Arthur',
-		freitag: 'Alex',
-		samstag: 'Andrea',
-		sonntag: 'Arnold',
-	},
-	{
-		montag: 'Helena',
-		dienstag: 'Fabian',
-		mittwoch: 'Marie',
-		donnerstag: 'Ben',
-		freitag: 'Marcus',
-		samstag: 'Alex',
-		sonntag: 'Marcus',
-	},
-	{
-		montag: 'Fabian',
-		dienstag: 'Helena',
-		mittwoch: 'Fabian',
-		donnerstag: 'Maya',
-		freitag: 'Ben',
-		samstag: 'Alex',
-		sonntag: 'Helena',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Finn',
-		dienstag: 'Roger',
-		mittwoch: 'Christian',
-		donnerstag: 'Caspar',
-		freitag: 'David',
-		samstag: 'Bernard',
-		sonntag: 'Anna',
-	},
-	{
-		montag: 'Alex',
-		dienstag: 'Anna',
-		mittwoch: 'Amalia',
-		donnerstag: 'Arthur',
-		freitag: 'Alex',
-		samstag: 'Andrea',
-		sonntag: 'Arnold',
-	},
-	{
-		montag: 'Helena',
-		dienstag: 'Fabian',
-		mittwoch: 'Marie',
-		donnerstag: 'Ben',
-		freitag: 'Marcus',
-		samstag: 'Alex',
-		sonntag: 'Marcus',
-	},
-	{
-		montag: 'Fabian',
-		dienstag: 'Helena',
-		mittwoch: 'Fabian',
-		donnerstag: 'Maya',
-		freitag: 'Ben',
-		samstag: 'Alex',
-		sonntag: 'Helena',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Finn',
-		dienstag: 'Roger',
-		mittwoch: 'Christian',
-		donnerstag: 'Caspar',
-		freitag: 'David',
-		samstag: 'Bernard',
-		sonntag: 'Anna',
-	},
-	{
-		montag: 'Alex',
-		dienstag: 'Anna',
-		mittwoch: 'Amalia',
-		donnerstag: 'Arthur',
-		freitag: 'Alex',
-		samstag: 'Andrea',
-		sonntag: 'Arnold',
-	},
-	{
-		montag: 'Helena',
-		dienstag: 'Fabian',
-		mittwoch: 'Marie',
-		donnerstag: 'Ben',
-		freitag: 'Marcus',
-		samstag: 'Alex',
-		sonntag: 'Marcus',
-	},
-	{
-		montag: 'Fabian',
-		dienstag: 'Helena',
-		mittwoch: 'Fabian',
-		donnerstag: 'Maya',
-		freitag: 'Ben',
-		samstag: 'Alex',
-		sonntag: 'Helena',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Finn',
-		dienstag: 'Roger',
-		mittwoch: 'Christian',
-		donnerstag: 'Caspar',
-		freitag: 'David',
-		samstag: 'Bernard',
-		sonntag: 'Anna',
-	},
-	{
-		montag: 'Alex',
-		dienstag: 'Anna',
-		mittwoch: 'Amalia',
-		donnerstag: 'Arthur',
-		freitag: 'Alex',
-		samstag: 'Andrea',
-		sonntag: 'Arnold',
-	},
-	{
-		montag: 'Helena',
-		dienstag: 'Fabian',
-		mittwoch: 'Marie',
-		donnerstag: 'Ben',
-		freitag: 'Marcus',
-		samstag: 'Alex',
-		sonntag: 'Marcus',
-	},
-	{
-		montag: 'Fabian',
-		dienstag: 'Helena',
-		mittwoch: 'Fabian',
-		donnerstag: 'Maya',
-		freitag: 'Ben',
-		samstag: 'Alex',
-		sonntag: 'Helena',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Hong',
-		dienstag: 'Alex',
-		mittwoch: 'Kevin',
-		donnerstag: 'Maya',
-		freitag: 'Fabian',
-		samstag: 'Helena',
-		sonntag: 'Alex',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Samuel',
-		dienstag: 'Selena',
-		mittwoch: 'Sandra',
-		donnerstag: 'Salim',
-		freitag: 'Robert',
-		samstag: 'Richard',
-		sonntag: 'Pamela',
-	},
-	{
-		montag: 'Finn',
-		dienstag: 'Roger',
-		mittwoch: 'Christian',
-		donnerstag: 'Caspar',
-		freitag: 'David',
-		samstag: 'Bernard',
-		sonntag: 'Anna',
-	},
-];
 
 export const HandoutBasic: FC = () => (
 	<div className="grid gap-4">