Skip to content

Commit 4d80a44

Browse files
Vinyl-DavylVinyl-Davyl
committed
Merge branch 'main' into feat/ai-integration-phase1
2 parents d0746c0 + 36bc401 commit 4d80a44

File tree

13 files changed

+396
-148
lines changed

13 files changed

+396
-148
lines changed

‎src/AgreementHtml.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Spin } from "antd";
44
import useAppStore from "./store/store";
55
import FullScreenModal from "./components/FullScreenModal";
66

7-
function AgreementHtml({ loading, isModal }: { loading: any; isModal?: boolean }) {
7+
function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boolean }) {
88
const agreementHtml = useAppStore((state) => state.agreementHtml);
99
const backgroundColor = useAppStore((state) => state.backgroundColor);
1010
const textColor = useAppStore((state) => state.textColor);

‎src/App.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import SampleDropdown from "./components/SampleDropdown";
1616
import UseShare from "./components/UseShare";
1717
import LearnContent from "./components/Content";
1818
import FloatingFAB from "./components/FabButton";
19+
import ResizableContainer from "./components/ResizableContainer";
1920

2021
const { Content } = Layout;
2122

@@ -141,7 +142,7 @@ const App = () => {
141142
<div
142143
style={{
143144
padding: 24,
144-
paddingBottom: 150,
145+
paddingBottom: 24,
145146
minHeight: 360,
146147
background: backgroundColor,
147148
}}
@@ -171,18 +172,20 @@ const App = () => {
171172
background: backgroundColor,
172173
}}
173174
>
174-
<Row gutter={24}>
175-
<Col xs={24} sm={16} style={{ paddingBottom: "20px" }}>
176-
<Collapse
177-
defaultActiveKey={activePanel}
178-
onChange={onChange}
179-
items={panels}
180-
/>
181-
</Col>
182-
<Col xs={24} sm={8}>
183-
<AgreementHtml loading={loading} isModal={false} />
184-
</Col>
185-
</Row>
175+
<ResizableContainer
176+
leftPane={
177+
<Collapse
178+
defaultActiveKey={activePanel}
179+
onChange={onChange}
180+
items={panels}
181+
style={{ marginBottom: "24px" }}
182+
/>
183+
}
184+
rightPane={<AgreementHtml loading={loading} isModal={false} />}
185+
initialLeftWidth={66}
186+
minLeftWidth={30}
187+
minRightWidth={30}
188+
/>
186189
</div>
187190
<FloatingFAB />
188191
</div>

‎src/components/Content.tsx

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import {
77
ContentContainer,
88
NavigationButtons,
99
NavigationButton,
10+
CodeBlockContainer,
11+
CopyButton,
1012
} from "../styles/components/Content";
1113
import {
1214
LoadingOutlined,
1315
LeftOutlined,
1416
RightOutlined,
17+
CopyOutlined,
18+
CheckOutlined,
1519
} from "@ant-design/icons";
1620
import { Spin } from "antd";
1721
import fetchContent from "../utils/fetchContent";
@@ -23,6 +27,7 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
2327
const [content, setContent] = useState<string | null>(null);
2428
const [loading, setLoading] = useState(true);
2529
const [error, setError] = useState<string | null>(null);
30+
const [copied, setCopied] = useState<string | null>(null);
2631
const navigate = useNavigate();
2732

2833
useEffect(() => {
@@ -59,6 +64,12 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
5964
}
6065
};
6166

67+
const copyToClipboard = (code: string) => {
68+
navigator.clipboard.writeText(code);
69+
setCopied(code);
70+
setTimeout(() => setCopied(null), 2000);
71+
};
72+
6273
if (loading) {
6374
return (
6475
<div
@@ -88,11 +99,20 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
8899
<ReactMarkdown
89100
rehypePlugins={[rehypeRaw, rehypeHighlight]}
90101
components={{
91-
img: ({ ...props }) => (
92-
<div className="image-container">
93-
<img {...props} alt={props.alt || ""} />
94-
</div>
95-
),
102+
pre: ({ children }) => {
103+
const codeElement = React.Children.toArray(children)[0] as React.ReactElement;
104+
if (!codeElement || typeof codeElement !== "object") return <pre>{children}</pre>;
105+
106+
const codeText = codeElement.props.children || "";
107+
return (
108+
<CodeBlockContainer>
109+
<pre>{children}</pre>
110+
<CopyButton onClick={() => copyToClipboard(codeText)}>
111+
{copied === codeText ? <CheckOutlined /> : <CopyOutlined />}
112+
</CopyButton>
113+
</CodeBlockContainer>
114+
);
115+
},
96116
}}
97117
>
98118
{content}

‎src/components/Navbar.tsx

Lines changed: 81 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
InfoOutlined,
1010
BookOutlined,
1111
CaretDownFilled,
12+
MenuOutlined
1213
} from "@ant-design/icons";
1314
import ToggleDarkMode from "./ToggleDarkMode";
1415

@@ -35,6 +36,55 @@ function Navbar({ scrollToFooter }: NavbarProps) {
3536
config: { duration: 1000 },
3637
});
3738

39+
const mobileMenu = (
40+
<Menu>
41+
<Menu.Item key="home">
42+
<Link to="/">
43+
Template Playground
44+
</Link>
45+
</Menu.Item>
46+
<Menu.Item key="explore" onClick={scrollToFooter}>
47+
Explore
48+
</Menu.Item>
49+
<Menu.Item key="about">
50+
<a
51+
href="https://github.com/accordproject/template-playground/blob/main/README.md"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
>
55+
<QuestionOutlined /> About
56+
</a>
57+
</Menu.Item>
58+
<Menu.Item key="community">
59+
<a
60+
href="https://discord.com/invite/Zm99SKhhtA"
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
>
64+
<UserOutlined /> Community
65+
</a>
66+
</Menu.Item>
67+
<Menu.Item key="issues">
68+
<a
69+
href="https://github.com/accordproject/template-playground/issues"
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
>
73+
<InfoOutlined /> Issues
74+
</a>
75+
</Menu.Item>
76+
<Menu.Item key="documentation">
77+
<a
78+
href="https://github.com/accordproject/template-engine/blob/main/README.md"
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
>
82+
<BookOutlined /> Documentation
83+
</a>
84+
</Menu.Item>
85+
</Menu>
86+
);
87+
3888
const helpMenu = (
3989
<Menu>
4090
<Menu.ItemGroup key="info" title="Info">
@@ -101,8 +151,8 @@ function Navbar({ scrollToFooter }: NavbarProps) {
101151
lineHeight: "65px",
102152
display: "flex",
103153
alignItems: "center",
104-
paddingLeft: screens.md ? 40 : 10,
105-
paddingRight: screens.md ? 40 : 10,
154+
paddingLeft: screens.lg ? 40 : screens.md ? 10 : 10,
155+
paddingRight: screens.lg ? 40 : screens.md ? 10 : 10,
106156
}}
107157
>
108158
<div
@@ -115,22 +165,24 @@ function Navbar({ scrollToFooter }: NavbarProps) {
115165
>
116166
<Link
117167
to="/"
168+
rel="noopener noreferrer"
118169
style={{ display: "flex", alignItems: "center" }}
119170
>
120171
<Image
121172
src={screens.lg ? "/logo.png" : "/accord_logo.png"}
122173
alt="Template Playground"
123174
preview={false}
124175
style={{
125-
paddingRight: screens.md ? "24px" : "10px",
176+
paddingRight: screens.md ? "8px" : "2px",
126177
height: "26px",
127178
maxWidth: screens.md ? "184.17px" : "36.67px",
128179
}}
129180
/>
130-
<span style={{ color: "white" }}>Template Playground</span>
181+
<span style={{ color: "white", display: screens.lg ? "block" : "none" }}>Template Playground</span>
182+
131183
</Link>
132184
</div>
133-
{screens.md && (
185+
{screens.md ? (
134186
<>
135187
<div
136188
style={{
@@ -170,27 +222,43 @@ function Navbar({ scrollToFooter }: NavbarProps) {
170222
</Dropdown>
171223
</div>
172224
</>
225+
) : (
226+
<div style={{ marginLeft: "5px" }}>
227+
<Dropdown overlay={mobileMenu} trigger={["click"]}>
228+
<Button
229+
style={{
230+
background: "transparent",
231+
border: "none",
232+
color: "white",
233+
height: "65px",
234+
display: "flex",
235+
alignItems: "center",
236+
}}
237+
>
238+
<MenuOutlined style={{ fontSize: "20px" }} />
239+
</Button>
240+
</Dropdown>
241+
</div>
173242
)}
174243
<div
175244
style={{
176245
display: "flex",
177246
marginLeft: "auto",
178247
alignItems: "center",
179248
height: "65px",
249+
gap: screens.md ? "20px" : "10px",
250+
marginRight: screens.md ? 0 : "5px"
180251
}}
181252
>
182-
<div>
253+
<div style={{ marginLeft: screens.md ? 0 : "auto" }}>
183254
<ToggleDarkMode />
184255
</div>
185256
{!isLearnPage && (
186257
<div
187258
style={{
188-
marginLeft: screens.md ? "20px" : "0",
189259
height: "65px",
190260
display: "flex",
191261
justifyContent: "center",
192-
paddingLeft: "15px",
193-
borderRadius: "5px",
194262
alignItems: "center",
195263
backgroundColor:
196264
hovered === "join" ? "rgba(255, 255, 255, 0.1)" : "transparent",
@@ -208,7 +276,6 @@ function Navbar({ scrollToFooter }: NavbarProps) {
208276
color: "#050c40",
209277
border: "none",
210278
borderRadius: "5px",
211-
marginRight: "15px",
212279
cursor: "pointer",
213280
}}
214281
>
@@ -228,7 +295,8 @@ function Navbar({ scrollToFooter }: NavbarProps) {
228295
borderLeft: screens.md
229296
? "1.5px solid rgba(255, 255, 255, 0.1)"
230297
: "none",
231-
paddingLeft: screens.md ? "20px" : "0",
298+
paddingLeft: screens.md ? 16 : 5,
299+
paddingRight: screens.md ? 16 : 5,
232300
backgroundColor:
233301
hovered === "github" ? "rgba(255, 255, 255, 0.1)" : "transparent",
234302
cursor: "pointer",
@@ -249,12 +317,12 @@ function Navbar({ scrollToFooter }: NavbarProps) {
249317
marginRight: screens.md ? "5px" : "0",
250318
}}
251319
/>
252-
{screens.md && <span>Github</span>}
320+
<span style={{ display: screens.md ? "inline" : "none" }}>Github</span>
253321
</a>
254322
</div>
255323
</div>
256324
</div>
257325
);
258326
}
259327

260-
export default Navbar;
328+
export default Navbar;

0 commit comments

Comments
 (0)