Skip to content

Commit 8e9824d

Browse files
committed
(#231) Resolved bugs in playground page
1 parent 1150d40 commit 8e9824d

File tree

11 files changed

+63
-41
lines changed

11 files changed

+63
-41
lines changed

docs/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ Sie sind vor allem nützlich für:
1010
- Testen von <KoliBri />
1111
- Melden von Fehlern
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards majorVersion={2} />

i18n/en/docusaurus-plugin-content-docs/current/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ They are especially useful for:
1010
- Testing <KoliBri />
1111
- Reporting bugs
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards lang="en" majorVersion={2} />

i18n/en/docusaurus-plugin-content-docs/version-1.5/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ They are especially useful for:
1010
- Testing <KoliBri />
1111
- Reporting bugs
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards lang="en" />

i18n/en/docusaurus-plugin-content-docs/version-1.6/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ They are especially useful for:
1010
- Testing <KoliBri />
1111
- Reporting bugs
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards lang="en" />

i18n/en/docusaurus-plugin-content-docs/version-1.7/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ They are especially useful for:
1010
- Testing <KoliBri />
1111
- Reporting bugs
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards lang="en" />

i18n/en/docusaurus-plugin-content-docs/version-2.0/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ They are especially useful for:
1010
- Testing <KoliBri />
1111
- Reporting bugs
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards lang="en" majorVersion={2} />

i18n/en/docusaurus-plugin-content-docs/version-2.1/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ They are especially useful for:
1010
- Testing <KoliBri />
1111
- Reporting bugs
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards lang="en" majorVersion={2} />

src/components/PlaygroundCards.tsx

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,43 @@
11
import { KolLinkButton } from '@public-ui/react';
22
import React from 'react';
3-
import type { FunctionComponent } from 'react';
3+
import type { FC } from 'react';
44
import Heading from '@theme/Heading';
55

6-
interface Playground {
7-
name: string;
8-
image: string;
9-
url: string;
10-
description: JSX.Element;
11-
}
6+
import type { Locale } from '../shares/language';
7+
import type { Playground } from '../shares/playground';
8+
import { PLAYGROUNDS_V1, PLAYGROUNDS_V2 } from '../shares/playground';
129

13-
const PLAYGROUNDS: Playground[] = [
14-
{
15-
name: '⚡ StackBlitz',
16-
image: 'stackblitz.png',
17-
url: 'https://stackblitz.com/edit/vitejs-vite-6bmmiv',
18-
description: <></>,
19-
},
20-
{
21-
name: '📦 CodeSandbox',
22-
image: 'codesandbox.png',
23-
url: 'https://codesandbox.io/s/minimal-kolibri-sample-oj7pee',
24-
description: <></>,
25-
},
26-
];
27-
28-
const PlaygroundCard: FunctionComponent<Playground> = ({ name, image, url, description }) => (
10+
const PlaygroundCard: FC<
11+
Playground & {
12+
lang: Locale;
13+
}
14+
> = ({ lang, name, image, url }) => (
2915
<div className="grid gap-2">
3016
<Heading as="h3">{name}</Heading>
3117
<img src={`/assets/playgrounds/${image}`} alt={`Vorschau des Playground ${name}'s`} />
32-
<p>{description}</p>
3318
<div className="text-center">
34-
<KolLinkButton _href={url} _label="Jetzt ausprobieren!" _target="${image}"></KolLinkButton>
19+
<KolLinkButton
20+
_href={url}
21+
_label={lang === 'de' ? 'Jetzt ausprobieren!' : 'Try it out now!'}
22+
_target="${image}"
23+
></KolLinkButton>
3524
</div>
3625
</div>
3726
);
3827

39-
export const PlaygroundCards: FunctionComponent = () => (
40-
<div className="grid gap-8 md:grid-cols-2">
41-
{PLAYGROUNDS.map((item, idx) => (
42-
<PlaygroundCard key={idx} {...item} />
43-
))}
44-
</div>
45-
);
28+
export type PlaygroundCardsProps = {
29+
lang?: Locale;
30+
majorVersion?: 1 | 2;
31+
};
32+
33+
export const PlaygroundCards: FC<PlaygroundCardsProps> = ({ lang = 'de', majorVersion = 1 }) => {
34+
return (
35+
<div className="grid gap-8 md:grid-cols-2">
36+
{(majorVersion === 1 ? PLAYGROUNDS_V1 : PLAYGROUNDS_V2).map((item, idx) => (
37+
<PlaygroundCard key={idx} lang={lang} {...item} />
38+
))}
39+
</div>
40+
);
41+
};
4642

4743
export default PlaygroundCards;

src/shares/playground.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export type Playground = {
2+
name: string;
3+
image: string;
4+
url: string;
5+
};
6+
7+
export const PLAYGROUNDS_V1: Playground[] = [
8+
{
9+
name: '⚡ StackBlitz',
10+
image: 'stackblitz.png',
11+
url: 'https://stackblitz.com/edit/vitejs-vite-6bmmiv',
12+
},
13+
{
14+
name: '📦 CodeSandbox',
15+
image: 'codesandbox.png',
16+
url: 'https://codesandbox.io/s/minimal-kolibri-sample-oj7pee',
17+
},
18+
];
19+
20+
export const PLAYGROUNDS_V2: Playground[] = [
21+
{
22+
...PLAYGROUNDS_V1[0],
23+
url: 'https://stackblitz.com/edit/vitejs-vite-kkfhk5',
24+
},
25+
PLAYGROUNDS_V1[1],
26+
];

versioned_docs/version-2.0/10-get-started/7-playground.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ Sie sind vor allem nützlich für:
1010
- Testen von <KoliBri />
1111
- Melden von Fehlern
1212

13-
<PlaygroundCards />
13+
<PlaygroundCards majorVersion={2} />

0 commit comments

Comments
 (0)