randyjc/Rahoot
1
0
Fork 0
mirror of https://github.com/randyjc/Rahoot.git synced 2026-03-13 20:15:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve reconnect, add ESLint configuration for common and socket

Browse Source
This commit is contained in:
Ralex
2025-10-19 00:37:26 +02:00
parent 8bdb8f47ef
commit 96bff164c0
36 changed files with 1571 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/web/src/components/game/create/SelectQuizz.tsx
View File

@@ -1,8 +1,6 @@
import { Quizz } from "@rahoot/common/types/game"
import logo from "@rahoot/web/assets/logo.svg"
import Button from "@rahoot/web/components/Button"
import clsx from "clsx"
import Image from "next/image"
import { useState } from "react"
import toast from "react-hot-toast"
@@ -10,8 +8,7 @@ type QuizzWithId = Quizz & { id: string }
type Props = {
quizzList: QuizzWithId[]
// eslint-disable-next-line no-unused-vars
onSelect: (id: string) => void
onSelect: (_id: string) => void
}
export default function SelectQuizz({ quizzList, onSelect }: Props) {
@@ -36,44 +33,32 @@ export default function SelectQuizz({ quizzList, onSelect }: Props) {
}
return (
<section className="relative flex min-h-screen flex-col items-center justify-center">
<div className="absolute h-full w-full overflow-hidden">
<div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
<div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
</div>
<div className="z-10 flex w-full max-w-md flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
<div className="flex flex-col items-center justify-center">
<h1 className="mb-2 text-2xl font-bold">Select a quizz</h1>
<div className="w-full space-y-2">
{quizzList.map((quizz) => (
<button
key={quizz.id}
className={clsx(
"flex w-full items-center justify-between rounded-md p-3 outline outline-gray-300",
)}
onClick={handleSelect(quizz.id)}
>
{quizz.subject}
<Image src={logo} className="mb-6 h-32" alt="logo" />
<div className="z-10 flex w-full max-w-md flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
<div className="flex flex-col items-center justify-center">
<h1 className="mb-2 text-2xl font-bold">Select a quizz</h1>
<div className="w-full space-y-2">
{quizzList.map((quizz) => (
<button
key={quizz.id}
<div
className={clsx(
"flex w-full items-center justify-between rounded-md p-3 outline outline-gray-300",
{
"border-primary outline-primary outline-2":
selected === quizz.id,
},
"h-5 w-5 rounded outline outline-offset-3 outline-gray-300",
selected === quizz.id &&
"bg-primary border-primary/80 shadow-inset",
)}
onClick={handleSelect(quizz.id)}
>
{quizz.subject}
<div
className={clsx(
"h-4 w-4 rounded-sm outline-2 outline-gray-300",
selected === quizz.id && "bg-primary outline-primary/50",
)}
></div>
</button>
))}
</div>
></div>
</button>
))}
</div>
<Button onClick={handleSubmit}>Submit</Button>
</div>
</section>
<Button onClick={handleSubmit}>Submit</Button>
</div>
)
}