Skip to content

Commit d6884a3

Browse files
samselikoffsamselikoff
committed
Scaffold out share page
1 parent 40dadab commit d6884a3

6 files changed

Lines changed: 240 additions & 46 deletions

File tree

‎app/(main)/layout.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Image from "next/image";
2+
import bgImg from "@/public/halo.png";
3+
4+
export default function Layout({
5+
children,
6+
}: Readonly<{
7+
children: React.ReactNode;
8+
}>) {
9+
return (
10+
<body className="bg-brand antialiased">
11+
<div className="absolute inset-x-0 flex justify-center">
12+
<Image
13+
src={bgImg}
14+
alt=""
15+
className="w-full max-w-[1200px] mix-blend-screen"
16+
priority
17+
/>
18+
</div>
19+
20+
<div className="isolate">{children}</div>
21+
</body>
22+
);
23+
}

app/page.tsx renamed to app/(main)/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
} from "eventsource-parser";
2121
import { AnimatePresence, motion } from "framer-motion";
2222
import { FormEvent, useEffect, useState } from "react";
23-
import LoadingDots from "../components/loading-dots";
23+
import LoadingDots from "../../components/loading-dots";
2424

2525
export default function Home() {
2626
let [status, setStatus] = useState<

‎app/layout.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { Metadata } from "next";
2-
import "./globals.css";
3-
import Image from "next/image";
4-
import bgImg from "@/public/halo.png";
52
import PlausibleProvider from "next-plausible";
3+
import "./globals.css";
64

75
let title = "Llama Coder – AI Code Generator";
86
let description = "Generate your next app with Llama 3.1 405B";
@@ -44,17 +42,8 @@ export default function RootLayout({
4442
<head>
4543
<PlausibleProvider domain="llamacoder.io" />
4644
</head>
47-
<body className="bg-brand antialiased">
48-
<div className="absolute inset-x-0 flex justify-center">
49-
<Image
50-
src={bgImg}
51-
alt=""
52-
className="w-full max-w-[1200px] mix-blend-screen"
53-
priority
54-
/>
55-
</div>
56-
<div className="isolate">{children}</div>
57-
</body>
45+
46+
{children}
5847
</html>
5948
);
6049
}

‎app/share/[id]/code-viewer.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
"use client";
2+
3+
import {
4+
SandpackPreview,
5+
SandpackProvider,
6+
} from "@codesandbox/sandpack-react/unstyled";
7+
import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
8+
9+
export default function CodeViewer({ code }: { code: string }) {
10+
return (
11+
<SandpackProvider
12+
template="react-ts"
13+
theme={draculaTheme}
14+
files={{
15+
"App.tsx": code,
16+
}}
17+
options={{
18+
externalResources: [
19+
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
20+
],
21+
}}
22+
>
23+
<SandpackPreview
24+
showOpenInCodeSandbox={false}
25+
showRefreshButton={false}
26+
/>
27+
</SandpackProvider>
28+
);
29+
}

‎app/share/[id]/layout.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Layout({
2+
children,
3+
}: Readonly<{
4+
children: React.ReactNode;
5+
}>) {
6+
return <body>{children}</body>;
7+
}

‎app/share/[id]/page.tsx‎

Lines changed: 177 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
21
import { notFound } from "next/navigation";
3-
import {
4-
SandpackProvider,
5-
SandpackLayout,
6-
SandpackPreview,
7-
} from "@codesandbox/sandpack-react";
2+
import CodeViewer from "./code-viewer";
83

94
async function getCode(id: string) {
105
await new Promise((resolve) => setTimeout(resolve, 1000));
116

12-
return `export default function Component() { return <p className='text-blue-500'>Hi!</p> };`;
7+
return sampleCode;
138
}
149

1510
/*
1611
Database schemahttp://localhost:3000/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fhalo.c1bc0835.png&w=3840&q=75
1712
18-
id (@uuid) | prompt (TEXT) | code (TEXT) |
19-
-----------------------------------------------------
20-
abkens | Build me a.... | export default function....
21-
islkns | Build me a.... | export default function....
13+
id (@uuid) | model (TEXT) | prompt (TEXT) | code (TEXT) | createdAt (auto datetime)
14+
-------------------------------------------------------------------------------------
15+
abkens | llama-405b | Build me a.... | function.... | now()
16+
islkns | llama-405b | Build me a.... | function.... | now()
2217
2318
Index on ID
2419
*/
@@ -30,25 +25,176 @@ export default async function Page({ params }: { params: { id: string } }) {
3025

3126
let code = await getCode(params.id);
3227

28+
return <CodeViewer code={code} />;
29+
}
30+
31+
let sampleCode = `
32+
import React, { useState } from 'react';
33+
34+
interface CalculatorState {
35+
currentNumber: string;
36+
previousNumber: string;
37+
operation: string;
38+
}
39+
40+
const Calculator: React.FC = () => {
41+
const [state, setState] = useState<CalculatorState>({
42+
currentNumber: '0',
43+
previousNumber: '',
44+
operation: '',
45+
});
46+
47+
const handleNumberClick = (number: string) => {
48+
if (state.currentNumber === '0') {
49+
setState({ ...state, currentNumber: number });
50+
} else {
51+
setState({ ...state, currentNumber: state.currentNumber + number });
52+
}
53+
};
54+
55+
const handleOperationClick = (operation: string) => {
56+
setState({
57+
previousNumber: state.currentNumber,
58+
currentNumber: '0',
59+
operation,
60+
});
61+
};
62+
63+
const handleEqualsClick = () => {
64+
let result: number;
65+
switch (state.operation) {
66+
case '+':
67+
result = parseFloat(state.previousNumber) + parseFloat(state.currentNumber);
68+
break;
69+
case '-':
70+
result = parseFloat(state.previousNumber) - parseFloat(state.currentNumber);
71+
break;
72+
case '*':
73+
result = parseFloat(state.previousNumber) * parseFloat(state.currentNumber);
74+
break;
75+
case '/':
76+
result = parseFloat(state.previousNumber) / parseFloat(state.currentNumber);
77+
break;
78+
default:
79+
result = 0;
80+
}
81+
setState({ ...state, currentNumber: result.toString() });
82+
};
83+
84+
const handleClearClick = () => {
85+
setState({
86+
currentNumber: '0',
87+
previousNumber: '',
88+
operation: '',
89+
});
90+
};
91+
3392
return (
34-
<SandpackProvider
35-
template="react-ts"
36-
theme={draculaTheme}
37-
files={{
38-
"App.tsx": code,
39-
}}
40-
options={{
41-
externalResources: [
42-
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
43-
],
44-
}}
45-
>
46-
<SandpackLayout>
47-
<SandpackPreview
48-
showOpenInCodeSandbox={false}
49-
showRefreshButton={false}
50-
/>
51-
</SandpackLayout>
52-
</SandpackProvider>
93+
<div className="max-w-md mx-auto p-4 bg-gray-100 rounded shadow-md">
94+
<div className="flex justify-end mb-4">
95+
<p className="text-3xl">{state.currentNumber}</p>
96+
</div>
97+
<div className="grid grid-cols-4 gap-4">
98+
<button
99+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
100+
onClick={() => handleNumberClick('7')}
101+
>
102+
7
103+
</button>
104+
<button
105+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
106+
onClick={() => handleNumberClick('8')}
107+
>
108+
8
109+
</button>
110+
<button
111+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
112+
onClick={() => handleNumberClick('9')}
113+
>
114+
9
115+
</button>
116+
<button
117+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
118+
onClick={() => handleOperationClick('/')}
119+
>
120+
/
121+
</button>
122+
<button
123+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
124+
onClick={() => handleNumberClick('4')}
125+
>
126+
4
127+
</button>
128+
<button
129+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
130+
onClick={() => handleNumberClick('5')}
131+
>
132+
5
133+
</button>
134+
<button
135+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
136+
onClick={() => handleNumberClick('6')}
137+
>
138+
6
139+
</button>
140+
<button
141+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
142+
onClick={() => handleOperationClick('*')}
143+
>
144+
*
145+
</button>
146+
<button
147+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
148+
onClick={() => handleNumberClick('1')}
149+
>
150+
1
151+
</button>
152+
<button
153+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
154+
onClick={() => handleNumberClick('2')}
155+
>
156+
2
157+
</button>
158+
<button
159+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
160+
onClick={() => handleNumberClick('3')}
161+
>
162+
3
163+
</button>
164+
<button
165+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
166+
onClick={() => handleOperationClick('-')}
167+
>
168+
-
169+
</button>
170+
<button
171+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
172+
onClick={() => handleNumberClick('0')}
173+
>
174+
0
175+
</button>
176+
<button
177+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
178+
onClick={handleClearClick}
179+
>
180+
C
181+
</button>
182+
<button
183+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
184+
onClick={handleEqualsClick}
185+
>
186+
=
187+
</button>
188+
<button
189+
className="bg-gray-200 hover:bg-gray-300 p-4 rounded"
190+
onClick={() => handleOperationClick('+')}
191+
>
192+
+
193+
</button>
194+
</div>
195+
</div>
53196
);
54-
}
197+
};
198+
199+
export default Calculator;
200+
`;

0 commit comments

Comments
 (0)