95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import { Highlight } from "@/components/Highlight";
|
|
import Tabs from "@/components/Tabs";
|
|
|
|
export default {
|
|
reactTodolist: () => {
|
|
return (
|
|
<Tabs defaultSelectedTab="app">
|
|
<Tabs.Item value="app" label="App.tsx">
|
|
<Highlight language="tsx" withLineNumbers>
|
|
{`import TodoList from "./TodoList";
|
|
import React from "react";
|
|
|
|
const App = () => {
|
|
return (
|
|
<div>
|
|
<h1>TodoList</h1>
|
|
|
|
<TodoList />
|
|
</div>
|
|
);
|
|
};`}
|
|
</Highlight>
|
|
</Tabs.Item>
|
|
|
|
<Tabs.Item value="todolist" label="TodoList.tsx">
|
|
{`
|
|
\`\`\`tsx showLineNumbers
|
|
import TodoListItem from "./TodoListItem";
|
|
import React from "react";
|
|
|
|
const TodoList = () => {
|
|
const [items, setItems] = React.useState<string[]>([]);
|
|
const [inputValue, setInputValue] = React.useState<string>("");
|
|
|
|
const handleInputValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setInputValue(event.target.value);
|
|
};
|
|
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
// On empêche le comportement par défaut du formulaire
|
|
event.preventDefault();
|
|
|
|
// On ajoute un nouvel élément à la liste des tâches
|
|
setItems([...items, inputValue]);
|
|
|
|
// On réinitialise la valeur de l'input
|
|
setInputValue("");
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<form onSubmit={handleSubmit}>
|
|
<label htmlFor="todolist-input"></label>
|
|
|
|
<input id="todolist-input" type="text" value={inputValue} onChange={handleInputValueChange} />
|
|
</form>
|
|
|
|
<ul>
|
|
{items.map((item, index) => (
|
|
<li key={index}>
|
|
<TodoListItem item={item} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TodoList;
|
|
\`\`\`
|
|
`}
|
|
</Tabs.Item>
|
|
|
|
<Tabs.Item value="todolistitem" label="TodoListItem.tsx">
|
|
{`
|
|
\`\`\`tsx showLineNumbers
|
|
import React from "react";
|
|
|
|
interface TodoListItemProps {
|
|
item: string;
|
|
}
|
|
|
|
const TodoListItem = (props: TodoListItemProps) => {
|
|
return <span>{props.item}</span>;
|
|
};
|
|
|
|
export default TodoListItem;
|
|
\`\`\`
|
|
`}
|
|
</Tabs.Item>
|
|
</Tabs>
|
|
);
|
|
},
|
|
};
|