bruhbot/src/pages/my/folders/index.tsx

import { GetServerSideProps } from 'next'
import FolderTemplate from '../../../components/templates/Folder'

const Home = ({ path, id, children, items, }) => {
	return (
		<FolderTemplate
			path={path}
			id={id}
			children={children}
			items={items}
		/>
	)
}

export const getServerSideProps: GetServerSideProps = async ({ query: nextQuery }) => {
	const { q: query = '' } = nextQuery
	return {
		props: {
			query,
			items: new Array(24).fill(0).map((_, i) => (
				{
					id: `11111111-1111-1111-11111111111${i}`,
					name: 'Bruh',
					url: 'http://placehold.it/300',
				}
			)),
			children: [
				{
					id: '00000000-0000-0000-000000000001',
					name: 'Foo Folder 1',
					children: [
						{
							id: '00000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '00000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '00000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '00000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '00000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},

				{
					id: '10000000-0000-0000-000000000001',
					name: 'Foo Folder 2',
					children: [
						{
							id: '10000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '10000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '10000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '10000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '10000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},

				{
					id: '20000000-0000-0000-000000000001',
					name: 'Foo Folder 3',
					children: [
						{
							id: '20000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '20000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '20000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '20000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '20000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},
				{
					id: '30000000-0000-0000-000000000001',
					name: 'Foo Folder 4',
					children: [
						{
							id: '30000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '30000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '30000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '30000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '30000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},

				{
					id: '40000000-0000-0000-000000000001',
					name: 'Foo Folder 5',
					children: [
						{
							id: '40000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '40000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '40000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '40000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '40000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},
			],
		},
	}
}

export default Home