Add footer to player page

apps/web/src/screens/main/Footer.tsx → apps/web/src/components/Footer.tsx

@@ -1,8 +1,10 @@
-'use client'
 import Link from 'next/link'
+import { cn } from '~/utils'
 
-export const Footer = () => (
-  <footer className="grid justify-between gap-1 text-xs text-gray-400 md:grid-cols-2">
+export const Footer = ({ className }: { className?: string }) => (
+  <footer
+    className={cn('grid justify-between gap-1 text-xs text-gray-400 md:grid-cols-2', className)}
+  >
     <div>
       Player and game statistics for{' '}
       <a

apps/web/src/screens/Player/Games.tsx

@@ -50,7 +50,7 @@ export const Games = ({
   const isDirty = some(filter, (value) => value !== Filter.All)
 
   return (
-    <section className="relative space-y-1 pb-8">
+    <section className="relative space-y-1">
       <header className="flex items-center justify-between">
         <h2 className="font-bold">
           {isDirty ? 'Filtered games' : 'Recent games'}

apps/web/src/screens/Player/main.tsx

@@ -1,3 +1,4 @@
+import { Footer } from '~/components/Footer'
 import { Logo } from '~/components/Logo'
 import { ThemeSelector } from '~/components/ThemeSelector'
 import { Badges } from './Badges'
@@ -42,6 +43,7 @@ export const Player = () => {
       <div className="min-w-0 xl:col-span-2">
         <Matrix summary={summary} />
       </div>
+      <Footer className="col-span-full mt-0 border-t border-zinc-700 pb-4 pt-4" />
     </div>
   )
 }

apps/web/src/screens/main/index.tsx

@@ -2,10 +2,10 @@
 
 import Link from 'next/link'
 import { useState, useCallback } from 'react'
+import { Footer } from '~/components/Footer'
 import { Logo } from '~/components/Logo'
 import { ThemeSelector } from '~/components/ThemeSelector'
 import { Class, Game, God, Player, Race } from '~/types'
-import { Footer } from './Footer'
 import { Search } from './Search'
 import { Stats } from './Stats'
 import { TournamentBanner } from './TournamentBanner'