Skip to content

Instantly share code, notes, and snippets.

@nataliaconde
Created February 20, 2023 20:40
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nataliaconde/6c92f3b5deee8105d893bff12e842134 to your computer and use it in GitHub Desktop.
// components/Task.js
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import CardActions from "@mui/material/CardActions";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
export default function Task(props) {
return (
<Card>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{props.title}
</Typography>
<Typography variant="body2" color="text.secondary">
ID: {props.id}
</Typography>
<Typography variant="body2" color="text">
Description: {props.description}
</Typography>
<Typography variant="body2" color="text">
Done: {props.isDone ? ("✔️") : ("❌")}
</Typography>
</CardContent>
<CardActions>
{props.isDone ? (
<Button size="small" onClick={() => console.log("TODO: mark as undone")}>Mark as undone</Button>
) : (
<Button size="small" onClick={() => console.log("TODO: mark as done")}>Mark as done</Button>
)}
<Button size="small" onClick={() => console.log("TODO: delete")}>Delete</Button>
</CardActions>
</Card>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment