#So, I have `src/app/(pages)/(app)/v2/

1 messages · Page 1 of 1 (latest)

bleak plaza
#

this is the chat layout:

import type { ReactNode } from 'react'

export default function ChatsLayout({
  detail,
  list,
  params,
}: {
  detail: ReactNode
  list: ReactNode
  params: { id: string | undefined }
}) {
  const { id } = params

  const shouldShowDetail = Boolean(id)

  console.log('shouldShowDetail', shouldShowDetail)
  console.log('id', id)

  return (
    <>
      <div className="hidden md:flex">
        <div className="w-1/3">{list}</div>
        <div className="w-2/3">{detail}</div>
      </div>

      {!shouldShowDetail && detail}

      <div className="md:hidden">{detail}</div>
    </>
  )
}
#

on desktop we have a two column layout where we show a list of chats and chat detail to the right