Skip to content

Commit 9375f83

Browse files
NutlopeNutlope
committed
updates
1 parent 43a3e58 commit 9375f83

2 files changed

Lines changed: 125 additions & 114 deletions

File tree

‎app/(main)/actions.ts‎

Lines changed: 5 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -268,123 +268,14 @@ function getSystemPrompt(shadcn: boolean, mostSimilarExample: string) {
268268
269269
Explain your work. The first codefence should be the main React component. It should also use "tsx" as the language, and be followed by a sensible filename for the code (please use kebab-case for file names). Use this format: \`\`\`tsx{filename=calculator.tsx}.
270270
271-
Here's an example of a good response:
272-
273-
"I'll create a calculator app using React. This calculator will support basic arithmetic operations: addition, subtraction, multiplication, and division. Let's break it down into components and implement the functionality.
274-
275-
\`\`\`tsx{filename=calculator.tsx}
276-
import { useState } from 'react'
277-
import { Button } from "/components/ui/button"
278-
import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card"
279-
280-
export default function Calculator() {
281-
const [display, setDisplay] = useState('0')
282-
const [firstOperand, setFirstOperand] = useState<number | null>(null)
283-
const [operator, setOperator] = useState<string | null>(null)
284-
const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false)
285-
286-
const inputDigit = (digit: string) => {
287-
if (waitingForSecondOperand) {
288-
setDisplay(digit)
289-
setWaitingForSecondOperand(false)
290-
} else {
291-
setDisplay(display === '0' ? digit : display + digit)
292-
}
293-
}
294-
295-
const inputDecimal = () => {
296-
if (waitingForSecondOperand) {
297-
setDisplay('0.')
298-
setWaitingForSecondOperand(false)
299-
return
300-
}
301-
302-
if (!display.includes('.')) {
303-
setDisplay(display + '.')
304-
}
305-
}
306-
307-
const clear = () => {
308-
setDisplay('0')
309-
setFirstOperand(null)
310-
setOperator(null)
311-
setWaitingForSecondOperand(false)
312-
}
313-
314-
const performOperation = (nextOperator: string) => {
315-
const inputValue = parseFloat(display)
316-
317-
if (firstOperand === null) {
318-
setFirstOperand(inputValue)
319-
} else if (operator) {
320-
const result = calculate(firstOperand, inputValue, operator)
321-
setDisplay(String(result))
322-
setFirstOperand(result)
323-
}
324-
325-
setWaitingForSecondOperand(true)
326-
setOperator(nextOperator)
327-
}
328-
329-
const calculate = (firstOperand: number, secondOperand: number, operator: string) => {
330-
switch (operator) {
331-
case '+':
332-
return firstOperand + secondOperand
333-
case '-':
334-
return firstOperand - secondOperand
335-
case '*':
336-
return firstOperand * secondOperand
337-
case '/':
338-
return firstOperand / secondOperand
339-
default:
340-
return secondOperand
341-
}
342-
}
343-
344-
return (
345-
<Card className="w-full max-w-md mx-auto">
346-
<CardHeader>
347-
<CardTitle className="text-2xl font-bold">Calculator</CardTitle>
348-
</CardHeader>
349-
<CardContent>
350-
<div className="grid grid-cols-4 gap-2">
351-
<div className="col-span-4 bg-gray-100 p-2 rounded mb-2">
352-
<div className="text-right text-2xl font-bold">{display}</div>
353-
</div>
354-
<Button onClick={() => clear()}>C</Button>
355-
<Button onClick={() => inputDigit('7')}>7</Button>
356-
<Button onClick={() => inputDigit('8')}>8</Button>
357-
<Button onClick={() => inputDigit('9')}>9</Button>
358-
<Button onClick={() => performOperation('/')}>/</Button>
359-
<Button onClick={() => inputDigit('4')}>4</Button>
360-
<Button onClick={() => inputDigit('5')}>5</Button>
361-
<Button onClick={() => inputDigit('6')}>6</Button>
362-
<Button onClick={() => performOperation('*')}>*</Button>
363-
<Button onClick={() => inputDigit('1')}>1</Button>
364-
<Button onClick={() => inputDigit('2')}>2</Button>
365-
<Button onClick={() => inputDigit('3')}>3</Button>
366-
<Button onClick={() => performOperation('-')}>-</Button>
367-
<Button onClick={() => inputDigit('0')}>0</Button>
368-
<Button onClick={() => inputDecimal()}>.</Button>
369-
<Button onClick={() => performOperation('=')}>=</Button>
370-
<Button onClick={() => performOperation('+')}>+</Button>
371-
</div>
372-
</CardContent>
373-
</Card>
374-
)
375-
}
376-
\`\`\`
271+
Here's a good example:
377272
378-
This calculator component provides a simple and functional interface for basic arithmetic operations. Here's a breakdown of its features:
273+
Prompt:
274+
${examples["calculator app"].prompt}
379275
380-
1. Display: Shows the current input or result.
381-
2. Digit buttons: Allow users to input numbers.
382-
3. Operation buttons: +, -, *, and / for basic arithmetic operations.
383-
4. Clear button (C): Resets the calculator.
384-
5. Decimal point button: Allows input of decimal numbers.
385-
6. Equals button (=): Performs the calculation.
276+
Response:
277+
${examples["calculator app"].response}
386278
387-
The component uses React's useState hook to manage the state of the display, operands, and current operation. The logic handles both immediate execution of operations and chaining of multiple operations."
388279
`;
389280

390281
if (mostSimilarExample !== "none") {

‎lib/shadcn-examples.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,4 +317,124 @@ export default function Blog() {
317317
}
318318
`,
319319
},
320+
"calculator app": {
321+
prompt: "make me a calculator app",
322+
response: `
323+
I'll create a calculator app using React. This calculator will support basic arithmetic operations: addition, subtraction, multiplication, and division. Let's break it down into components and implement the functionality.
324+
325+
\`\`\`tsx{filename=calculator.tsx}
326+
import { useState } from 'react'
327+
import { Button } from "/components/ui/button"
328+
import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card"
329+
330+
export default function Calculator() {
331+
const [display, setDisplay] = useState('0')
332+
const [firstOperand, setFirstOperand] = useState<number | null>(null)
333+
const [operator, setOperator] = useState<string | null>(null)
334+
const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false)
335+
336+
const inputDigit = (digit: string) => {
337+
if (waitingForSecondOperand) {
338+
setDisplay(digit)
339+
setWaitingForSecondOperand(false)
340+
} else {
341+
setDisplay(display === '0' ? digit : display + digit)
342+
}
343+
}
344+
345+
const inputDecimal = () => {
346+
if (waitingForSecondOperand) {
347+
setDisplay('0.')
348+
setWaitingForSecondOperand(false)
349+
return
350+
}
351+
352+
if (!display.includes('.')) {
353+
setDisplay(display + '.')
354+
}
355+
}
356+
357+
const clear = () => {
358+
setDisplay('0')
359+
setFirstOperand(null)
360+
setOperator(null)
361+
setWaitingForSecondOperand(false)
362+
}
363+
364+
const performOperation = (nextOperator: string) => {
365+
const inputValue = parseFloat(display)
366+
367+
if (firstOperand === null) {
368+
setFirstOperand(inputValue)
369+
} else if (operator) {
370+
const result = calculate(firstOperand, inputValue, operator)
371+
setDisplay(String(result))
372+
setFirstOperand(result)
373+
}
374+
375+
setWaitingForSecondOperand(true)
376+
setOperator(nextOperator)
377+
}
378+
379+
const calculate = (firstOperand: number, secondOperand: number, operator: string) => {
380+
switch (operator) {
381+
case '+':
382+
return firstOperand + secondOperand
383+
case '-':
384+
return firstOperand - secondOperand
385+
case '*':
386+
return firstOperand * secondOperand
387+
case '/':
388+
return firstOperand / secondOperand
389+
default:
390+
return secondOperand
391+
}
392+
}
393+
394+
return (
395+
<Card className="w-full max-w-md mx-auto">
396+
<CardHeader>
397+
<CardTitle className="text-2xl font-bold">Calculator</CardTitle>
398+
</CardHeader>
399+
<CardContent>
400+
<div className="grid grid-cols-4 gap-2">
401+
<div className="col-span-4 bg-gray-100 p-2 rounded mb-2">
402+
<div className="text-right text-2xl font-bold">{display}</div>
403+
</div>
404+
<Button onClick={() => clear()}>C</Button>
405+
<Button onClick={() => inputDigit('7')}>7</Button>
406+
<Button onClick={() => inputDigit('8')}>8</Button>
407+
<Button onClick={() => inputDigit('9')}>9</Button>
408+
<Button onClick={() => performOperation('/')}>/</Button>
409+
<Button onClick={() => inputDigit('4')}>4</Button>
410+
<Button onClick={() => inputDigit('5')}>5</Button>
411+
<Button onClick={() => inputDigit('6')}>6</Button>
412+
<Button onClick={() => performOperation('*')}>*</Button>
413+
<Button onClick={() => inputDigit('1')}>1</Button>
414+
<Button onClick={() => inputDigit('2')}>2</Button>
415+
<Button onClick={() => inputDigit('3')}>3</Button>
416+
<Button onClick={() => performOperation('-')}>-</Button>
417+
<Button onClick={() => inputDigit('0')}>0</Button>
418+
<Button onClick={() => inputDecimal()}>.</Button>
419+
<Button onClick={() => performOperation('=')}>=</Button>
420+
<Button onClick={() => performOperation('+')}>+</Button>
421+
</div>
422+
</CardContent>
423+
</Card>
424+
)
425+
}
426+
\`\`\`
427+
428+
This calculator component provides a simple and functional interface for basic arithmetic operations. Here's a breakdown of its features:
429+
430+
1. Display: Shows the current input or result.
431+
2. Digit buttons: Allow users to input numbers.
432+
3. Operation buttons: +, -, *, and / for basic arithmetic operations.
433+
4. Clear button (C): Resets the calculator.
434+
5. Decimal point button: Allows input of decimal numbers.
435+
6. Equals button (=): Performs the calculation.
436+
437+
The component uses React's useState hook to manage the state of the display, operands, and current operation. The logic handles both immediate execution of operations and chaining of multiple operations."
438+
`,
439+
},
320440
};

0 commit comments

Comments
 (0)