Skip to content

Commit b194ec3

Browse files
merlinfuchsmerlinfuchs
committed
Playground MVP followups
fix tailwind build errors add config set button fix styling inconsistencies add theme switch to playground
1 parent 456f393 commit b194ec3

File tree

9 files changed

+88
-21
lines changed

9 files changed

+88
-21
lines changed

‎package-lock.json‎

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@docusaurus/plugin-client-redirects": "^3.7.0",
2020
"@docusaurus/preset-classic": "^3.7.0",
2121
"@easyops-cn/docusaurus-search-local": "^0.45.0",
22+
"@iconify/react": "^6.0.2",
2223
"@mdx-js/react": "^3.0.1",
2324
"clsx": "^1.2.1",
2425
"docusaurus-plugin-sass": "^0.2.3",

‎src/components/playground/Playground.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import PlaygroundUseCaseSelect from "./PlaygroundUseCaseSelect";
1212
import PlaygroundVersionInfoBanner from "./PlaygroundVersionInfoBanner";
1313
import PlaygroundBeginnerBanner from "./PlaygroundBeginnerBanner";
1414
import PlaygroundModeSwitch from "./PlaygroundModeSwitch";
15+
import PlaygroundThemeSwitch from "./PlaygroundThemeSwitch";
1516

1617
export default function Playground() {
1718
const [settings, setSettings] = useState<PlaygroundSettings>(
@@ -42,19 +43,21 @@ export default function Playground() {
4243

4344
return (
4445
<div id="tw-scope">
46+
<PlaygroundThemeSwitch />
47+
4548
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-20">
4649
<div className="container mx-auto px-4 py-8">
4750
{/* Header */}
4851
<div className="mb-8">
4952
<div className="flex flex-col md:flex-row justify-between gap-5 items-start">
5053
<div>
51-
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
54+
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-3">
5255
Friendly Captcha Playground
5356
</h1>
54-
<p className="text-lg text-gray-600 dark:text-gray-300">
57+
<div className="text-lg text-gray-600 dark:text-gray-300">
5558
Explore different settings and options for Friendly Captcha v1
5659
and v2
57-
</p>
60+
</div>
5861
</div>
5962

6063
<PlaygroundModeSwitch

‎src/components/playground/PlaygroundBeginnerBanner.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function PlaygroundBeginnerBanner() {
44
return (
55
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
66
<div className="flex items-start space-x-3">
7-
<div className="flex-shrink-0">
7+
<div className="flex-shrink-0 mt-1">
88
<svg
99
className="h-5 w-5 text-green-400"
1010
fill="currentColor"
@@ -18,9 +18,9 @@ export default function PlaygroundBeginnerBanner() {
1818
</svg>
1919
</div>
2020
<div className="flex-1">
21-
<h3 className="text-sm font-medium text-green-800 dark:text-green-200">
21+
<div className="text-lg font-bold text-green-800 dark:text-green-100 mb-2">
2222
Beginner Mode
23-
</h3>
23+
</div>
2424
<div className="mt-1 text-sm text-green-700 dark:text-green-300">
2525
<p>
2626
You're in beginner mode! This simplified view focuses on the

‎src/components/playground/PlaygroundConfigEditor.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PlaygroundSettings } from "@site/src/lib/playground";
1+
import { defaultSettings, PlaygroundSettings } from "@site/src/lib/playground";
22
import React, { useEffect, useState } from "react";
33

44
export default function PlaygroundConfigEditor({
@@ -14,11 +14,24 @@ export default function PlaygroundConfigEditor({
1414
setCustomEndpoint(settings.customEndpoint);
1515
}, [settings.customEndpoint]);
1616

17+
const handleReset = () => {
18+
setSettings(defaultSettings);
19+
};
20+
1721
return (
1822
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
19-
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
20-
Configuration
21-
</h2>
23+
<div className="flex justify-between items-start mb-6">
24+
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
25+
Configuration
26+
</h2>
27+
<button
28+
onClick={handleReset}
29+
className="px-2 py-1 text-sm font-medium text-gray-500 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
30+
title="Reset all settings to default"
31+
>
32+
Reset
33+
</button>
34+
</div>
2235

2336
{/* Version Selector */}
2437
<div className="mb-6">
@@ -28,7 +41,7 @@ export default function PlaygroundConfigEditor({
2841
<div className="flex space-x-2">
2942
<button
3043
onClick={() => setSettings({ ...settings, version: "v1" })}
31-
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
44+
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
3245
settings.version === "v1"
3346
? "bg-blue-600 text-white"
3447
: "bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
@@ -38,7 +51,7 @@ export default function PlaygroundConfigEditor({
3851
</button>
3952
<button
4053
onClick={() => setSettings({ ...settings, version: "v2" })}
41-
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
54+
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
4255
settings.version === "v2"
4356
? "bg-blue-600 text-white"
4457
: "bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"

‎src/components/playground/PlaygroundThemeSwitch.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useColorMode } from "@docusaurus/theme-common";
2+
import React from "react";
3+
import { Icon } from "@iconify/react";
4+
5+
export default function PlaygroundThemeSwitch() {
6+
const { colorMode, setColorMode } = useColorMode();
7+
8+
return (
9+
<div className="fixed top-5 right-5">
10+
<button
11+
onClick={() => setColorMode(colorMode === "light" ? "dark" : "light")}
12+
className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
13+
>
14+
<Icon
15+
icon={colorMode === "light" ? "solar:sun-bold" : "solar:moon-bold"}
16+
height={26}
17+
/>
18+
</button>
19+
</div>
20+
);
21+
}

‎src/components/playground/PlaygroundVersionInfoBanner.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function PlaygroundVersionInfoBanner({
99
return (
1010
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
1111
<div className="flex items-start space-x-3">
12-
<div className="flex-shrink-0">
12+
<div className="flex-shrink-0 mt-1">
1313
<svg
1414
className="h-5 w-5 text-blue-400"
1515
fill="currentColor"
@@ -23,20 +23,22 @@ export default function PlaygroundVersionInfoBanner({
2323
</svg>
2424
</div>
2525
<div className="flex-1">
26-
<h3 className="text-sm font-medium text-blue-800 dark:text-blue-200">
26+
<div className="text-xl font-bold text-blue-800 dark:text-blue-100 mb-3">
2727
{settings.version === "v1"
2828
? "Friendly Captcha v1"
2929
: "Friendly Captcha v2"}
30-
</h3>
30+
</div>
3131
<div className="mt-1 text-sm text-blue-700 dark:text-blue-300 prose">
3232
{settings.version === "v1" ? (
33-
<p>
33+
<div className="mb-5">
3434
Legacy version with basic features. Switch to v2 for improved
3535
protection and UX.
36-
</p>
36+
</div>
3737
) : (
3838
<>
39-
<p>Latest version with improved protection and UX.</p>
39+
<div className="mb-5">
40+
Latest version with improved protection and UX.
41+
</div>
4042

4143
<ul className="list-disc list-outside space-y-2">
4244
<li>

‎src/lib/playground.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface WidgetEvent {
2424
data?: any;
2525
}
2626

27-
const defaultSettings: PlaygroundSettings = {
27+
export const defaultSettings: PlaygroundSettings = {
2828
version: "v2",
2929
widgetMode: "smart",
3030
startMode: "focus",

‎src/pages/playground.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import React from "react";
21
import BrowserOnly from "@docusaurus/BrowserOnly";
2+
import { ColorModeProvider } from "@docusaurus/theme-common/internal";
3+
import React from "react";
34

45
export default function PlaygroundPage() {
56
return (
67
<BrowserOnly fallback={<div>Playground Loading...</div>}>
78
{() => {
89
const Playground =
910
require("../components/playground/Playground").default;
10-
return <Playground />;
11+
return (
12+
<ColorModeProvider>
13+
<Playground />
14+
</ColorModeProvider>
15+
);
1116
}}
1217
</BrowserOnly>
1318
);

0 commit comments

Comments
 (0)