import { Meta } from '@storybook/addon-docs';
import Link from '@cloudscape-design/components/link';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

<Meta title="Migration/TimePicker" />

# Migrating from NorthStar legacy - TimePicker

There is not a matched TimePicker component avaliable on Cloudscape. However, 
you can use <Link href='https://cloudscape.design/components/time-input' target='_blank' external>Cloudscape TimeInput component</Link> to allow users enter an absolute time value.

If the TimePicker is used in a Form setting, it is recommended to 
use <Link href='https://aws.github.io/aws-northstar/?path=/story/components-formrenderer--default' target='_blank' external>NorthStar v2 FormRenderer component</Link> 
to build the form from JSON schema. 

## Update Import

```diff
- import TimePicker from 'aws-northstar/components/TimePicker';
+ import TimeInput from '@cloudscape-design/components/time-input'';
```

export const Component = () => {
  return <SyntaxHighlighter/>;
};