Skip to content

Commit 61f3d8b

Browse files
cblanccblanc
committed
chore(UI): Update endpoints
1 parent a70587b commit 61f3d8b

9 files changed

Lines changed: 534 additions & 105 deletions

File tree

‎src/components/Code/index.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
1-
import React, { useEffect } from "react";
2-
import Prism from "prismjs";
3-
import "prismjs";
4-
import "prismjs/components/prism-json";
1+
import React from "react";
2+
import { Highlight, themes } from "prism-react-renderer";
3+
import { useColorMode } from "@docusaurus/theme-common";
4+
import styles from "./styles.module.css";
55

66
export interface Props {
77
code: string;
88
language: string;
99
}
1010

1111
export const Code = ({ code, language }: Props) => {
12-
useEffect(() => {
13-
Prism.highlightAll();
14-
}, []);
12+
const { colorMode } = useColorMode();
13+
const theme = colorMode === "dark" ? themes.vsDark : themes.vsLight;
1514

1615
return (
17-
<pre style={{ maxWidth: '100%', display: 'block' }}>
18-
<code className={`language-${language}`} style={{ wordBreak: 'break-all', whiteSpace: 'pre-wrap', display: 'block' }}>{code}</code>
19-
</pre>
16+
<div className={styles.codeContainer}>
17+
<Highlight code={code} language={language} theme={theme}>
18+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
19+
<pre className={`${className} ${styles.codeBlock}`} style={style}>
20+
{tokens.map((line, i) => (
21+
<div key={i} {...getLineProps({ line })}>
22+
<span className={styles.lineNumber}>{i + 1}</span>
23+
<span className={styles.lineContent}>
24+
{line.map((token, key) => (
25+
<span key={key} {...getTokenProps({ token })} />
26+
))}
27+
</span>
28+
</div>
29+
))}
30+
</pre>
31+
)}
32+
</Highlight>
33+
</div>
2034
);
2135
};

‎src/components/Code/styles.module.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/* Code container styling */
2+
.codeContainer {
3+
margin: 0;
4+
border-radius: 0;
5+
overflow: hidden;
6+
border: none;
7+
background: transparent;
8+
}
9+
10+
/* Code block styling */
11+
.codeBlock {
12+
margin: 0;
13+
padding: 0.75rem 0;
14+
font-family: var(--ifm-font-family-monospace);
15+
font-size: 0.875rem;
16+
line-height: 1.5;
17+
overflow-x: auto;
18+
border: none;
19+
border-radius: 0;
20+
}
21+
22+
/* Override prism-react-renderer background to ensure theme background is used */
23+
.codeBlock[style] {
24+
background: var(--prism-background-color) !important;
25+
}
26+
27+
/* Line styling */
28+
.codeBlock > div {
29+
display: flex;
30+
min-height: 1.5rem;
31+
align-items: center;
32+
}
33+
34+
/* Line numbers */
35+
.lineNumber {
36+
display: inline-block;
37+
width: 2.5rem;
38+
padding-left: 1rem;
39+
padding-right: 1rem;
40+
text-align: right;
41+
color: var(--ifm-color-emphasis-500);
42+
font-size: 0.75rem;
43+
user-select: none;
44+
flex-shrink: 0;
45+
}
46+
47+
.lineContent {
48+
flex: 1;
49+
min-width: 0;
50+
padding-right: 1rem;
51+
}
52+
53+
/* Responsive adjustments */
54+
@media (max-width: 768px) {
55+
.codeBlock {
56+
font-size: 0.8rem;
57+
padding: 0.75rem;
58+
}
59+
60+
.lineNumber {
61+
width: 2rem;
62+
padding-right: 0.5rem;
63+
font-size: 0.7rem;
64+
}
65+
}
66+
67+
/* Dark theme adjustments */
68+
[data-theme="dark"] .codeContainer {
69+
border-color: rgba(255, 255, 255, 0.2);
70+
}
71+
72+
/* Enhanced scrollbar for code blocks */
73+
.codeBlock::-webkit-scrollbar {
74+
height: 8px;
75+
}
76+
77+
.codeBlock::-webkit-scrollbar-track {
78+
background: var(--ifm-color-emphasis-200);
79+
border-radius: 4px;
80+
}
81+
82+
.codeBlock::-webkit-scrollbar-thumb {
83+
background: var(--ifm-color-emphasis-400);
84+
border-radius: 4px;
85+
}
86+
87+
.codeBlock::-webkit-scrollbar-thumb:hover {
88+
background: var(--ifm-color-emphasis-600);
89+
}
90+
91+
/* Firefox scrollbar */
92+
.codeBlock {
93+
scrollbar-width: thin;
94+
scrollbar-color: var(--ifm-color-emphasis-400) var(--ifm-color-emphasis-200);
95+
}

‎src/components/Demos/index.tsx‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,22 @@ import GetGeocode from "./getGeocode";
77

88
export default function EndpointsDemo(): React.JSX.Element {
99
return (
10-
<section className={styles.mobileFeatures}>
10+
<section className={styles.endpointsSection}>
1111
<div className={styles.container}>
12-
<div className={styles.header}>
13-
<h2>API Endpoints</h2>
14-
</div>
1512

1613
{/* Postcode Validation */}
17-
<div className={styles.category}>
18-
<h3 className={styles.categoryLabel}>Postcode Validation</h3>
14+
<div className={styles.categoryCard}>
15+
<div className={styles.categoryHeader}>
16+
<div className={styles.categoryIcon}>
17+
<img src="img/verification.png" alt="Verification" />
18+
</div>
19+
<div>
20+
<h2 className={styles.categoryTitle}>Postcode Validation</h2>
21+
<p className={styles.categoryDescription}>
22+
Validate, lookup, and search UK postcodes with comprehensive geographic data
23+
</p>
24+
</div>
25+
</div>
1926
<div className={styles.demoGroup}>
2027
<GetPostcode
2128
endpointTemplate="api.postcodes.io/postcodes/"
@@ -49,8 +56,18 @@ export default function EndpointsDemo(): React.JSX.Element {
4956
</div>
5057

5158
{/* Bulk Reverse Geocoding */}
52-
<div className={styles.category}>
53-
<h3 className={styles.categoryLabel}>Reverse Geocoding</h3>
59+
<div className={styles.categoryCard}>
60+
<div className={styles.categoryHeader}>
61+
<div className={styles.categoryIcon}>
62+
<img src="img/reverse_geocoding.png" alt="Reverse Geocoding" />
63+
</div>
64+
<div>
65+
<h2 className={styles.categoryTitle}>Reverse Geocoding</h2>
66+
<p className={styles.categoryDescription}>
67+
Convert coordinates to postcodes and find nearest locations
68+
</p>
69+
</div>
70+
</div>
5471
<div className={styles.demoGroup}>
5572
<GetGeocode
5673
endpointTemplate="api.postcodes.io/postcodes"
@@ -81,10 +98,18 @@ export default function EndpointsDemo(): React.JSX.Element {
8198
</div>
8299

83100
{/* Geographical & Demographic Data */}
84-
<div className={styles.category}>
85-
<h3 className={styles.categoryLabel}>
86-
Geographical & Demographic Data
87-
</h3>
101+
<div className={styles.categoryCard}>
102+
<div className={styles.categoryHeader}>
103+
<div className={styles.categoryIcon}>
104+
<img src="img/data.png" alt="Data" />
105+
</div>
106+
<div>
107+
<h2 className={styles.categoryTitle}>Geographical & Demographic Data</h2>
108+
<p className={styles.categoryDescription}>
109+
Access detailed administrative boundaries and demographic information
110+
</p>
111+
</div>
112+
</div>
88113
<div className={styles.demoGroup}>
89114
<GetPostcode
90115
endpointTemplate="api.postcodes.io/postcodes/"

0 commit comments

Comments
 (0)