import useMediaQuery from '@/hooks/utilities/useMediaQuery'; import useTimeDistance from '@/hooks/utilities/useTimeDistance'; import findUserById from '@/services/User/findUserById'; import GetUserSchema from '@/services/User/schema/GetUserSchema'; import { format } from 'date-fns'; import { GetServerSideProps } from 'next'; import Head from 'next/head'; import { FC } from 'react'; import { z } from 'zod'; import Image from 'next/image'; interface UserInfoPageProps { user: z.infer; } const UserHeader: FC<{ user: z.infer }> = ({ user }) => { const timeDistance = useTimeDistance(new Date(user.createdAt)); return (

{user.firstName} {user.lastName}

joined{' '} {timeDistance && ( {`${timeDistance} ago`} )}

); }; const UserInfoPage: FC = ({ user }) => { const isDesktop = useMediaQuery('(min-width: 1024px)'); return ( <> {user ? `${user.firstName} ${user.lastName}` : 'User Info'} <>
avatar
{isDesktop ? <> : <> }
); }; export default UserInfoPage; export const getServerSideProps: GetServerSideProps = async ( context, ) => { const { id } = context.params!; const user = await findUserById(id as string); if (!user) { return { notFound: true }; } return { props: { user: JSON.parse(JSON.stringify(user)) } }; };