Skip to content

Commit c80121d

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
Add timeline examples to prototype app
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent ac90802 commit c80121d

1 file changed

Lines changed: 218 additions & 0 deletions

File tree

‎examples/prototype/src/App.tsx‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -367,6 +367,224 @@ const schema = {
367367
label: 'Analytics',
368368
body: { type: 'text', content: 'Analytics Content' }
369369
},
370+
{
371+
value: 'timeline',
372+
label: 'Timeline',
373+
body: [
374+
{
375+
type: 'div',
376+
className: 'space-y-8',
377+
body: [
378+
{
379+
type: 'div',
380+
body: [
381+
{ type: 'div', className: 'text-xl font-semibold mb-2', body: { type: 'text', content: 'Vertical Timeline' } },
382+
{ type: 'div', className: 'text-sm text-muted-foreground mb-4', body: { type: 'text', content: 'A classic vertical timeline showing project milestones.' } },
383+
{
384+
type: 'card',
385+
className: 'shadow-sm',
386+
body: {
387+
type: 'div',
388+
className: 'p-6',
389+
body: {
390+
type: 'timeline',
391+
variant: 'vertical',
392+
dateFormat: 'long',
393+
items: [
394+
{
395+
time: '2024-01-15',
396+
title: 'Project Kickoff',
397+
description: 'Initial meeting with stakeholders and project planning',
398+
variant: 'success',
399+
icon: '🚀'
400+
},
401+
{
402+
time: '2024-02-01',
403+
title: 'Design Phase Complete',
404+
description: 'UI/UX designs approved and ready for development',
405+
variant: 'info',
406+
icon: '🎨'
407+
},
408+
{
409+
time: '2024-03-15',
410+
title: 'Beta Release',
411+
description: 'Internal testing phase begins with selected users',
412+
variant: 'warning',
413+
icon: '⚡'
414+
},
415+
{
416+
time: '2024-04-01',
417+
title: 'Official Launch',
418+
description: 'Product goes live to all users',
419+
variant: 'success',
420+
icon: '🎉'
421+
}
422+
]
423+
}
424+
}
425+
}
426+
]
427+
},
428+
{
429+
type: 'div',
430+
body: [
431+
{ type: 'div', className: 'text-xl font-semibold mb-2', body: { type: 'text', content: 'Horizontal Timeline' } },
432+
{ type: 'div', className: 'text-sm text-muted-foreground mb-4', body: { type: 'text', content: 'Quarterly roadmap display.' } },
433+
{
434+
type: 'card',
435+
className: 'shadow-sm',
436+
body: {
437+
type: 'div',
438+
className: 'p-6',
439+
body: {
440+
type: 'timeline',
441+
variant: 'horizontal',
442+
dateFormat: 'short',
443+
items: [
444+
{
445+
time: '2024-01-01',
446+
title: 'Q1 2024',
447+
description: 'Planning & Design',
448+
variant: 'success'
449+
},
450+
{
451+
time: '2024-04-01',
452+
title: 'Q2 2024',
453+
description: 'Development',
454+
variant: 'info'
455+
},
456+
{
457+
time: '2024-07-01',
458+
title: 'Q3 2024',
459+
description: 'Testing & QA',
460+
variant: 'warning'
461+
},
462+
{
463+
time: '2024-10-01',
464+
title: 'Q4 2024',
465+
description: 'Launch & Scale',
466+
variant: 'success'
467+
}
468+
]
469+
}
470+
}
471+
}
472+
]
473+
},
474+
{
475+
type: 'div',
476+
body: [
477+
{ type: 'div', className: 'text-xl font-semibold mb-2', body: { type: 'text', content: 'Gantt Timeline (Airtable Style)' } },
478+
{ type: 'div', className: 'text-sm text-muted-foreground mb-4', body: { type: 'text', content: 'Project timeline with date ranges and multiple tracks.' } },
479+
{
480+
type: 'card',
481+
className: 'shadow-sm',
482+
body: {
483+
type: 'div',
484+
className: 'p-6',
485+
body: {
486+
type: 'timeline',
487+
variant: 'gantt',
488+
dateFormat: 'short',
489+
timeScale: 'month',
490+
rowLabel: 'Project Tasks',
491+
items: [
492+
{
493+
label: 'Backend Development',
494+
items: [
495+
{
496+
title: 'API Design',
497+
startDate: '2024-01-01',
498+
endDate: '2024-01-31',
499+
variant: 'success'
500+
},
501+
{
502+
title: 'Database Schema',
503+
startDate: '2024-01-15',
504+
endDate: '2024-02-15',
505+
variant: 'info'
506+
},
507+
{
508+
title: 'API Implementation',
509+
startDate: '2024-02-01',
510+
endDate: '2024-03-31',
511+
variant: 'default'
512+
}
513+
]
514+
},
515+
{
516+
label: 'Frontend Development',
517+
items: [
518+
{
519+
title: 'UI Design',
520+
startDate: '2024-01-15',
521+
endDate: '2024-02-15',
522+
variant: 'warning'
523+
},
524+
{
525+
title: 'Component Library',
526+
startDate: '2024-02-01',
527+
endDate: '2024-03-15',
528+
variant: 'info'
529+
},
530+
{
531+
title: 'Integration',
532+
startDate: '2024-03-01',
533+
endDate: '2024-04-15',
534+
variant: 'default'
535+
}
536+
]
537+
},
538+
{
539+
label: 'Testing & QA',
540+
items: [
541+
{
542+
title: 'Unit Tests',
543+
startDate: '2024-02-15',
544+
endDate: '2024-03-15',
545+
variant: 'success'
546+
},
547+
{
548+
title: 'Integration Tests',
549+
startDate: '2024-03-01',
550+
endDate: '2024-04-01',
551+
variant: 'info'
552+
},
553+
{
554+
title: 'User Acceptance Testing',
555+
startDate: '2024-04-01',
556+
endDate: '2024-04-30',
557+
variant: 'danger'
558+
}
559+
]
560+
},
561+
{
562+
label: 'Deployment',
563+
items: [
564+
{
565+
title: 'Staging Deploy',
566+
startDate: '2024-04-15',
567+
endDate: '2024-04-20',
568+
variant: 'warning'
569+
},
570+
{
571+
title: 'Production Launch',
572+
startDate: '2024-04-25',
573+
endDate: '2024-05-01',
574+
variant: 'success'
575+
}
576+
]
577+
}
578+
]
579+
}
580+
}
581+
}
582+
]
583+
}
584+
]
585+
}
586+
]
587+
},
370588
{
371589
value: 'reports',
372590
label: 'Reports',

0 commit comments

Comments
 (0)