Date/Time Picker + Box Text

[tunile943]

Branches: atoms/date-time-picker + atoms/box-text

Task at Hand

1. View the Design System for the Components.
2. Create a folder /atoms under /components. Inside /atoms, you should create folders /DatePicker, /TimePicker, /BoxText with a file index.tsx inside containing the code for that atom.
3. Implement a date picker, time picker, and box component adhering to the Design System above.

Picture of date and time picker components:

The following are the props for date picker and time picker:

interface DatePickerProps { label: string | JSX.Element;
value?: string; error?: string;

}

interface TimePickerProps { label: string | JSX.Element; value?: string; error?: string; disablePast?: boolean;

}

Picture of box components:

The following are the props for box text:

interface BoxProps { boxType: 'Meeting Block' | 'Room Block'; title: string; bgColor: string; time?: string; // For Meeting Block tags?: string[]; // For badges like "Hybrid", "AA"

}

4. Confirm that your code and pull request follow the Pull Request Checklist. You might need to do two separate PRs for these two brances.

Acceptance Criteria

• [x] Create reusable atomic components which can be used in different contexts

Notes

• You might find these pages useful for date picker and time picker respectively.
• You might find this page useful for find emojis.