Add places to about page

app/about/page.tsx

@@ -61,6 +61,10 @@ export default async function AboutPage() {
     films,
   } = categories;
 
+  const place = albums
+    .slice()
+    .sort((a, b) => b.count - a.count)[0]?.album.location;
+
   const lastModifiedSite = max([
     getLastModifiedForCategories(categories, photos),
     about?.updatedAt,
@@ -80,8 +84,9 @@ export default async function AboutPage() {
         lens={lenses[0]?.lens}
         recipe={recipes[0]?.recipe}
         film={films[0]?.film}
-        album={albums[0]?.album}
         tag={tags.filter(({ tag }) => tag !== TAG_FAVS)[0]?.tag}
+        place={place}
+        album={albums[0]?.album}
         lastUpdated={lastModifiedSite}
       />
       : <PhotosEmptyState />

src/about/AboutPageClient.tsx

@@ -24,6 +24,8 @@ import Link from 'next/link';
 import { PATH_ADMIN_ABOUT_EDIT } from '@/app/path';
 import { LuCirclePlus, LuUser } from 'react-icons/lu';
 import AdminEmptyState from '@/admin/AdminEmptyState';
+import { Place } from '@/place';
+import PlaceEntity from '@/place/PlaceEntity';
 
 export default function AboutPageClient({
   title,
@@ -37,8 +39,9 @@ export default function AboutPageClient({
   lens,
   recipe,
   film,
-  album,
   tag,
+  place,
+  album,
   lastUpdated,
 }: {
   title?: string
@@ -52,8 +55,9 @@ export default function AboutPageClient({
   lens?: Lens
   recipe?: string
   film?: string
-  album?: Album
   tag?: string
+  place?: Place
+  album?: Album
   lastUpdated?: Date
 }) {
   const {
@@ -118,14 +122,6 @@ export default function AboutPageClient({
         badged={false}
       />,
     ),
-    album && renderItem(
-      appText.about.recentAlbum,
-      <PhotoAlbum
-        album={album}
-        type="text-only"
-        contrast="high"
-      />,
-    ),
     tag && renderItem(
       appText.about.popularTag,
       <PhotoTag
@@ -134,6 +130,23 @@ export default function AboutPageClient({
         contrast="high"
       />,
     ),
+    place && renderItem(
+      appText.about.popularPlace,
+      <PlaceEntity
+        place={place}
+        type="text-only"
+        contrast="high"
+        badged={false}
+      />,
+    ),
+    album && renderItem(
+      appText.about.recentAlbum,
+      <PhotoAlbum
+        album={album}
+        type="text-only"
+        contrast="high"
+      />,
+    ),
   ].filter(Boolean), [
     appText.about,
     photosCount,
@@ -143,6 +156,7 @@ export default function AboutPageClient({
     recipe,
     film,
     album,
+    place,
     tag,
   ]);
 
@@ -199,9 +213,9 @@ export default function AboutPageClient({
             <AnimateItems
               className={clsx(
                 'grid gap-x-2 gap-y-6 grid-cols-2',
-                items.length <= 6
+                items.length === 7 || items.length === 8
-                  ? 'lg:grid-cols-3'
+                  ? 'lg:grid-cols-4'
-                  : 'lg:grid-cols-4',
+                  : 'lg:grid-cols-3',
               )}
               items={items}
             />

src/i18n/locales/bd-bn.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'শীর্ষ ফিল্ম',
     recentAlbum: 'সাম্প্রতিক অ্যালবাম',
     popularTag: 'জনপ্রিয় ট্যাগ',
+    popularPlace: 'জনপ্রিয় স্থান',
   },
   footer: {
     madeWith: 'তৈরি হয়েছে',

src/i18n/locales/en-gb.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'Top Film',
     recentAlbum: 'Recent Album',
     popularTag: 'Popular Tag',
+    popularPlace: 'Popular Place',
   },
   footer: {
     madeWith: 'Made with',

src/i18n/locales/en-us.ts

@@ -64,8 +64,9 @@ export const TEXT = {
     topLens: 'Top Lens',
     topRecipe: 'Top Recipe',
     topFilm: 'Top Film',
-    recentAlbum: 'Recent Album',
     popularTag: 'Popular Tag',
+    popularPlace: 'Popular Place',
+    recentAlbum: 'Recent Album',
   },
   footer: {
     madeWith: 'Made with',

src/i18n/locales/es-es.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'Película principal',
     recentAlbum: 'Álbum reciente',
     popularTag: 'Etiqueta popular',
+    popularPlace: 'Lugar popular',
   },
   footer: {
     madeWith: 'Hecho con',

src/i18n/locales/hi-in.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'शीर्ष फिल्म',
     recentAlbum: 'हाल का एल्बम',
     popularTag: 'लोकप्रिय टैग',
+    popularPlace: 'लोकप्रिय स्थान',
   },
   footer: {
     madeWith: 'निर्मित',

src/i18n/locales/id-id.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'Film teratas',
     recentAlbum: 'Album terbaru',
     popularTag: 'Tag populer',
+    popularPlace: 'Tempat populer',
   },
   footer: {
     madeWith: 'Dibuat dengan',

src/i18n/locales/pt-br.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'Filme principal',
     recentAlbum: 'Álbum recente',
     popularTag: 'Tag popular',
+    popularPlace: 'Lugar popular',
   },
   footer: {
     madeWith: 'Feito com',

src/i18n/locales/pt-pt.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'Filme principal',
     recentAlbum: 'Álbum recente',
     popularTag: 'Etiqueta popular',
+    popularPlace: 'Local popular',
   },
   footer: {
     madeWith: 'Feito com',

src/i18n/locales/tr-tr.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'En çok kullanılan film',
     recentAlbum: 'Son albüm',
     popularTag: 'Popüler etiket',
+    popularPlace: 'Popüler yer',
   },
   footer: {
     madeWith: 'Hazırlayan:',

src/i18n/locales/vi-vn.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: 'Phim phổ biến',
     recentAlbum: 'Album gần đây',
     popularTag: 'Thẻ phổ biến',
+    popularPlace: 'Địa điểm phổ biến',
   },
   footer: {
     madeWith: 'Được tạo bằng',

src/i18n/locales/zh-cn.ts

@@ -67,6 +67,7 @@ export const TEXT: I18N = {
     topFilm: '常用胶片',
     recentAlbum: '最近相册',
     popularTag: '热门标签',
+    popularPlace: '热门地点',
   },
   footer: {
     madeWith: '基于',

src/place/PlaceEntity.tsx

@@ -50,7 +50,7 @@ export default function PlaceEntity({
         label={place.nameFormatted || place.name}
         path={place.link}
         pathTarget="_blank"
-        badged
+        badged={props.badged ?? true}
       />
     </SharedHover>
   );