Skip to content

Commit fc8fef9

Browse files
mythzmythz
committed
Update to latest gallery website
1 parent 487bfce commit fc8fef9

File tree

10 files changed

+234
-147
lines changed

10 files changed

+234
-147
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@servicestack/react": "^2.0.6",
13+
"@servicestack/react": "^2.0.8",
1414
"@types/react-syntax-highlighter": "^15.5.13",
1515
"react": "^19.1.1",
1616
"react-dom": "^19.1.1",

‎src/gallery/components/CodeExample.tsx‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ReactNode } from 'react'
1+
import { ReactNode, memo, useMemo } from 'react'
22
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
33
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
44

@@ -10,7 +10,30 @@ interface CodeExampleProps {
1010
children: ReactNode
1111
}
1212

13-
export default function CodeExample({ title, description, code, language = 'tsx', children }: CodeExampleProps) {
13+
function CodeExample({ title, description, code, language = 'tsx', children }: CodeExampleProps) {
14+
// Memoize the code block to prevent re-rendering when only children change
15+
const codeBlock = useMemo(() => (
16+
<div className="mb-4 rounded-lg overflow-hidden">
17+
<SyntaxHighlighter
18+
language={language}
19+
style={oneDark}
20+
customStyle={{
21+
margin: 0,
22+
borderRadius: '0.5rem',
23+
fontSize: '0.875rem',
24+
backgroundColor: '#0f172a', // slate-900
25+
}}
26+
codeTagProps={{
27+
style: {
28+
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
29+
}
30+
}}
31+
>
32+
{code}
33+
</SyntaxHighlighter>
34+
</div>
35+
), [code, language])
36+
1437
return (
1538
<div className="mb-12">
1639
{title && (
@@ -25,25 +48,7 @@ export default function CodeExample({ title, description, code, language = 'tsx'
2548
)}
2649

2750
{/* Code Block */}
28-
<div className="mb-4 rounded-lg overflow-hidden">
29-
<SyntaxHighlighter
30-
language={language}
31-
style={oneDark}
32-
customStyle={{
33-
margin: 0,
34-
borderRadius: '0.5rem',
35-
fontSize: '0.875rem',
36-
backgroundColor: '#0f172a', // slate-900
37-
}}
38-
codeTagProps={{
39-
style: {
40-
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
41-
}
42-
}}
43-
>
44-
{code}
45-
</SyntaxHighlighter>
46-
</div>
51+
{codeBlock}
4752

4853
{/* Live Example */}
4954
<div className="not-prose border border-gray-200 dark:border-gray-800 rounded-lg p-6 bg-white dark:bg-gray-900">
@@ -53,3 +58,5 @@ export default function CodeExample({ title, description, code, language = 'tsx'
5358
)
5459
}
5560

61+
export default memo(CodeExample)
62+

‎src/gallery/components/GalleryLayout.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,18 @@ export default function GalleryLayout({ children, title }: GalleryLayoutProps) {
2424
<header className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
2525
<div className="px-2 sm:px-3 lg:px-6">
2626
<div className="flex justify-between items-center h-16">
27-
<div className="flex items-center gap-8">
28-
<a href="/gallery" className="text-xl font-bold text-gray-900 dark:text-gray-100">
27+
<div className="flex items-center gap-2">
28+
<a href="/">
29+
<svg className="w-8 h-8 text-[#61DAFB]" viewBox="-11.5 -10.23174 23 20.46348" xmlns="http://www.w3.org/2000/svg">
30+
<circle cx="0" cy="0" r="2.05" fill="currentColor"/>
31+
<g stroke="currentColor" strokeWidth="1" fill="none">
32+
<ellipse rx="11" ry="4.2"/>
33+
<ellipse rx="11" ry="4.2" transform="rotate(60)"/>
34+
<ellipse rx="11" ry="4.2" transform="rotate(120)"/>
35+
</g>
36+
</svg>
37+
</a>
38+
<a href="/" className="text-xl font-bold text-gray-900 dark:text-gray-100">
2939
React Component Gallery
3040
</a>
3141
</div>

‎src/gallery/pages/Autocomplete.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,15 @@ export default function AutocompletePage() {
5151
)}
5252
</Autocomplete>
5353
<div className="mt-2 flex justify-end">
54-
<p>
54+
<div>
5555
<b className="text-gray-500">Single:</b>
5656
{simple && (
5757
<div className="flex">
5858
<img src={simple.profileUrl} className="w-8 h-8 rounded-full mr-2" alt={simple.displayName} />
5959
<b className="text-lg">{simple.displayName}</b>
6060
</div>
6161
)}
62-
</p>
62+
</div>
6363
</div>
6464
</div>
6565
</CodeExample>
@@ -102,15 +102,15 @@ export default function AutocompletePage() {
102102
)}
103103
</Autocomplete>
104104
<div className="mt-2 flex justify-end">
105-
<p>
105+
<div>
106106
<b className="text-gray-500">Single with Icon:</b>
107107
{contact && (
108108
<div className="flex">
109109
<img src={contact.profileUrl} className="w-8 h-8 rounded-full mr-2" alt={contact.displayName} />
110110
<b className="text-lg">{contact.displayName}</b>
111111
</div>
112112
)}
113-
</p>
113+
</div>
114114
</div>
115115
</div>
116116
</CodeExample>
@@ -156,7 +156,7 @@ export default function AutocompletePage() {
156156
</Autocomplete>
157157
<div className="mt-2">
158158
<div className="text-right"><b className="text-gray-500">Multiple with Icon:</b></div>
159-
<p>
159+
<div>
160160
{contacts.length > 0 && (
161161
<div className="flex flex-wrap">
162162
{contacts.map((c: any) => (
@@ -167,7 +167,7 @@ export default function AutocompletePage() {
167167
))}
168168
</div>
169169
)}
170-
</p>
170+
</div>
171171
</div>
172172
</div>
173173
</CodeExample>

‎src/gallery/pages/Combobox.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,30 @@ function ComboboxContent() {
1818
</p>
1919
</div>
2020

21+
2122
<CodeExample
2223
title="Combobox Examples"
2324
description="Combobox supports different data sources including string arrays, objects, and key-value pairs:"
2425
code={`<div className="grid grid-cols-12 gap-6">
2526
<Combobox
2627
id="Strings"
27-
className="col-span-4"
28+
className="col-span-12 xl:col-span-3"
2829
label="Strings"
2930
value={strings}
3031
onChange={setStrings}
3132
values={['Alpha','Bravo','Charlie']}
3233
/>
3334
<Combobox
3435
id="Object"
35-
className="col-span-4"
36+
className="col-span-12 xl:col-span-3"
3637
label="Object"
3738
value={objects}
3839
onChange={setObjects}
3940
options={{ A:'Alpha', B:'Bravo', C:'Charlie' }}
4041
/>
4142
<Combobox
4243
id="Pairs"
43-
className="col-span-4"
44+
className="col-span-12 xl:col-span-6"
4445
value={pairs}
4546
onChange={setPairs}
4647
label="Multiple from Pairs"
@@ -54,7 +55,7 @@ function ComboboxContent() {
5455
</div>`}
5556
>
5657
<div className="grid grid-cols-12 gap-6">
57-
<div className="col-span-4">
58+
<div className="col-span-12 xl:col-span-3">
5859
<Combobox
5960
id="Strings"
6061
label="Strings"
@@ -67,7 +68,7 @@ function ComboboxContent() {
6768
</div>
6869
</div>
6970

70-
<div className="col-span-4">
71+
<div className="col-span-12 xl:col-span-3">
7172
<Combobox
7273
id="Object"
7374
label="Object"
@@ -80,7 +81,7 @@ function ComboboxContent() {
8081
</div>
8182
</div>
8283

83-
<div className="col-span-4">
84+
<div className="col-span-12 xl:col-span-6">
8485
<Combobox
8586
id="Pairs"
8687
value={pairs}

0 commit comments

Comments
 (0)