Practicing Typescript: Component props

Component props

// Profile.tsx
export type ProfileProps = {
  name: string
}

export const Profile = ({ name }: ProfileProps) => {
  return <div>Private Profile component. Name is {name}</div>
}

// Login.tsx
export const Login = () => {
  return <div>Please login to continue</div>
}

// Private.tsx
import { Login } from './Login'
import { ProfileProps } from './Profile'

type PrivateProps = {
  isLoggedIn: boolean
  Component: React.ComponentType<ProfileProps>
}

export const Private = ({ isLoggedIn, Component }: PrivateProps) => {
  if (isLoggedIn) {
    return <Component name='John' />
  } else {
    return <Login />
  }
}

// App.tsx
import { Private } from './components/auth/Private'
import { Profile } from './components/auth/Profile'

function App() {

	return (
    	<div className='App'>
        	<Private isLoggedIn={true} Component={Profile}/>
        </div>
    )
}