67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
/**
|
|
* Todo Detail App - Detailed view of a single todo
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
export function TodoDetail({ todoId }: { todoId?: number }) {
|
|
const todo = {
|
|
id: todoId || 1,
|
|
content: 'Design homepage mockup',
|
|
description: 'Create high-fidelity mockups for the new homepage design, including desktop and mobile views.',
|
|
completed: false,
|
|
assignees: [{ id: 1, name: 'Alice Johnson', avatar_url: '' }],
|
|
due_on: '2024-01-20',
|
|
created_at: '2024-01-10',
|
|
comments: [
|
|
{ id: 1, author: 'Bob Smith', content: 'Looking great! Can we add more white space?', created_at: '2024-01-12' },
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif', maxWidth: '800px' }}>
|
|
<h1 style={{ fontSize: '28px', marginBottom: '20px' }}>{todo.content}</h1>
|
|
|
|
<div style={{ marginBottom: '20px' }}>
|
|
<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
|
|
<input type="checkbox" checked={todo.completed} readOnly style={{ marginRight: '10px', width: '20px', height: '20px' }} />
|
|
<span style={{ fontSize: '16px' }}>{todo.completed ? 'Completed' : 'Mark as complete'}</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '20px' }}>
|
|
<h3 style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>Description</h3>
|
|
<p style={{ lineHeight: '1.6' }}>{todo.description}</p>
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '30px' }}>
|
|
<div>
|
|
<h3 style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>Assignees</h3>
|
|
{todo.assignees.map(assignee => (
|
|
<div key={assignee.id} style={{ padding: '8px', background: '#f5f5f5', borderRadius: '4px' }}>
|
|
{assignee.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div>
|
|
<h3 style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>Due Date</h3>
|
|
<div style={{ padding: '8px', background: '#f5f5f5', borderRadius: '4px' }}>
|
|
{todo.due_on}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 style={{ fontSize: '18px', marginBottom: '15px' }}>Comments</h3>
|
|
{todo.comments.map(comment => (
|
|
<div key={comment.id} style={{ marginBottom: '15px', padding: '12px', background: '#f9f9f9', borderRadius: '6px' }}>
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '4px' }}>{comment.author}</div>
|
|
<div style={{ fontSize: '12px', color: '#999', marginBottom: '8px' }}>{comment.created_at}</div>
|
|
<div>{comment.content}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|