diff --git a/components/Alert.js b/components/Alert.tsx similarity index 82% rename from components/Alert.js rename to components/Alert.tsx index c38ae27..f75705c 100644 --- a/components/Alert.js +++ b/components/Alert.tsx @@ -1,8 +1,13 @@ import React from 'react' import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid' -export default class Alert extends React.Component { - render() { +type AlertProps = { + success: boolean | null + message: string | null +} + +export default class Alert extends React.Component { + override render() { const icon = this.props.success ? ( ) : ( diff --git a/components/Home.js b/components/Home.tsx similarity index 99% rename from components/Home.js rename to components/Home.tsx index 3f6445b..7a860d7 100644 --- a/components/Home.js +++ b/components/Home.tsx @@ -87,9 +87,8 @@ const comments = [ }, ] -function classNames(...classes) { - return classes.filter(Boolean).join(' ') -} +const classNames = (...classes: (string | false | null | undefined)[]) => + classes.filter(Boolean).join(' ') export default function Home() { return ( diff --git a/components/Layout.js b/components/Layout.tsx similarity index 97% rename from components/Layout.js rename to components/Layout.tsx index 53e5f5c..7faa361 100644 --- a/components/Layout.js +++ b/components/Layout.tsx @@ -1,9 +1,13 @@ -import { Fragment } from 'react' +import { Fragment, type ReactNode } from 'react' import Link from 'next/link' import { Menu, Popover, Transition } from '@headlessui/react' import { MagnifyingGlassIcon } from '@heroicons/react/24/solid' import { BellIcon, Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline' +type LayoutProps = { + children: ReactNode +} + const user = { name: 'Whitney Francis', email: 'whitney@example.com', @@ -17,11 +21,10 @@ const navigation = [ { name: 'Company', href: '#' }, ] -function classNames(...classes) { - return classes.filter(Boolean).join(' ') -} +const classNames = (...classes: (string | false | null | undefined)[]) => + classes.filter(Boolean).join(' ') -export default function Layout(props) { +export default function Layout(props: LayoutProps) { const userNavigation = [ { name: 'Admin Settings', href: '/app/settings' }, { name: 'Your Profile', href: '#' }, diff --git a/components/LoginWithEmail.js b/components/LoginWithEmail.tsx similarity index 87% rename from components/LoginWithEmail.js rename to components/LoginWithEmail.tsx index c73f576..f535c44 100644 --- a/components/LoginWithEmail.js +++ b/components/LoginWithEmail.tsx @@ -3,8 +3,14 @@ import Link from 'next/link' import { EnvelopeIcon } from '@heroicons/react/24/solid' import Alert from './Alert' -export default class LoginWithEmail extends React.Component { - render() { +type LoginWithEmailProps = { + onSubmit: (e: React.FormEvent) => void | Promise + success: boolean | null + message: string | null +} + +export default class LoginWithEmail extends React.Component { + override render() { return (
@@ -18,7 +24,7 @@ export default class LoginWithEmail extends React.Component {
-
+