feat(client): add content to home and refine leaderboard data & design (

#583) * add font * add useful content into home page * refine leaderboard design and data * revert the max-w * further refine leaderboard design
bounswe · Oct 21, 2024 · a81d383 · a81d383
1 parent 0844c8a
commit a81d383
Show file tree

Hide file tree

Showing 10 changed files with 524 additions and 73 deletions.
diff --git a/client/index.html b/client/index.html
@@ -10,7 +10,6 @@
         />
         <meta name="robots" content="index, follow" />
         <meta name="theme-color" content="#06b6d4" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
         <meta name="apple-mobile-web-app-title" content="Turquiz" />
         <meta name="application-name" content="Turquiz" />

diff --git a/client/public/innovator.woff2 b/client/public/innovator.woff2
diff --git a/client/src/components/quiz-card.tsx b/client/src/components/quiz-card.tsx
@@ -23,6 +23,7 @@ import { getRelativeTime } from "../utils";
 type QuizCardProps = {
     quiz: Quiz;
     onTagClick: (tag: string) => void;
+    key: string;
 };
 
 const difficultyText = cva([
@@ -59,9 +60,10 @@ const scoreClass = cva(
 const scoreToInteger = (score: number) =>
     Math.floor(score) as 0 | 1 | 2 | 3 | 4;
 
-export const QuizCard = ({ quiz, onTagClick }: QuizCardProps) => {
+export const QuizCard = ({ quiz, onTagClick, key }: QuizCardProps) => {
     return (
         <div
+            key={key}
             aria-label={quiz.title}
             className="relative flex max-w-xl flex-col gap-4 rounded-2 bg-white px-6 py-6 shadow-none ring ring-slate-200 transition-all duration-200"
         >
@@ -84,14 +86,15 @@ export const QuizCard = ({ quiz, onTagClick }: QuizCardProps) => {
                 <TooltipProvider>
                     <TooltipAnchor
                         render={
-                            <a
-                                href="#"
+                            <span
+                                tabIndex={0}
+                                aria-label={`Rated by ${quiz.rating.count}`}
                                 className={scoreClass({
                                     score: scoreToInteger(quiz.rating.score),
                                 })}
                             >
                                 {quiz.rating.score.toFixed(1)}
-                            </a>
+                            </span>
                         }
                     ></TooltipAnchor>
                     <Tooltip>

diff --git a/client/src/mocks/mocks.quiz.ts b/client/src/mocks/mocks.quiz.ts
@@ -25,7 +25,7 @@ export const quizOverviews: QuizOverview[] = [
         },
         tags: [
             {
-                id: "471",
+                id: "4571",
                 name: "human",
             },
             {
@@ -99,7 +99,7 @@ export const quizOverviews: QuizOverview[] = [
                 name: "seasons",
             },
             {
-                id: "9879",
+                id: "98791",
                 name: "fun",
             },
             {