Fixed pagination. Added entity page channel tile expand.

pages/entities/+Page.vue

@@ -0,0 +1,125 @@
+<template>
+	<div class="page">
+		<div
+			v-for="(section, index) in sections"
+			:key="`section-${index}`"
+		>
+			<h2 class="section-label">{{ section.label }}</h2>
+
+			<ul class="networks nolist">
+				<li
+					v-for="network in section.networks"
+					:key="`network-${network.id}`"
+					:title="network.name"
+				>
+					<a
+						:href="`/${network.type}/${network.slug}`"
+						class="network"
+					>
+						<img
+							v-if="network.hasLogo"
+							:src="`/logos/${network.slug}/network.png`"
+							:alt="network.name"
+							class="logo"
+						>
+
+						<span v-else>{{ network.name }}</span>
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+const pageContext = inject('pageContext');
+
+const { pageProps } = pageContext;
+const { networks } = pageProps;
+
+const networksBySlug = Object.fromEntries(networks.map((network) => [network.slug, network]));
+
+const popularNetworks = [
+	'21sextury',
+	'adulttime',
+	'amateurallure',
+	'analvids',
+	'bamvisions',
+	'bang',
+	'bangbros',
+	'blowpass',
+	'brazzers',
+	'burningangel',
+	'digitalplayground',
+	'dogfartnetwork',
+	'dorcel',
+	'elegantangel',
+	'evilangel',
+	'fakehub',
+	'hookuphotshot',
+	'hussiepass',
+	'julesjordan',
+	'kink',
+	'mofos',
+	'naughtyamerica',
+	'newsensations',
+	'pervcity',
+	'pornpros',
+	'private',
+	'realitykings',
+	'teamskeet',
+	'vixen',
+	'xempire',
+].map((slug) => networksBySlug[slug]).filter(Boolean);
+
+const sections = [
+	{
+		label: 'Popular',
+		networks: popularNetworks,
+	},
+	{
+		label: 'All network',
+		networks,
+	},
+];
+</script>
+
+<style scoped>
+.networks {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.section-label {
+	padding: 0 1rem;
+	margin-bottom: .5rem;
+	color: var(--shadow);
+}
+
+.network {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	aspect-ratio: 4/1;
+	padding: 1rem;
+	border-radius: .5rem;
+	background: var(--grey-dark-40);
+	color: var(--text-light);
+	font-size: 1.25rem;
+	font-weight: bold;
+
+	&:hover {
+		box-shadow: 0 0 3px var(--shadow);
+	}
+}
+
+.logo {
+	height: 100%;
+	width: 100%;
+	object-fit: contain;
+}
+</style>