Introducing Game questions component
This commit is contained in:
parent
d1c615426f
commit
7843bf2860
27
src/assets/css/components/GameQuestion.scss
Normal file
27
src/assets/css/components/GameQuestion.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
.game-question {
|
||||||
|
@apply p-8 flex gap-x-8;
|
||||||
|
&__cover {
|
||||||
|
@apply w-1/2 h-auto object-contain object-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@apply text-5xl py-8;
|
||||||
|
}
|
||||||
|
.question {
|
||||||
|
@apply text-xl max-w-xl;
|
||||||
|
}
|
||||||
|
&__answer-buttons-container {
|
||||||
|
@apply flex items-center gap-4 flex-wrap mt-12;
|
||||||
|
}
|
||||||
|
&__answer-button {
|
||||||
|
@apply bg-neutral-100 border-none
|
||||||
|
rounded-full flex flex-col justify-center items-center shrink-0
|
||||||
|
w-fit h-auto
|
||||||
|
p-6;
|
||||||
|
|
||||||
|
img {
|
||||||
|
@apply h-16 w-16 block object-contain object-center;
|
||||||
|
}
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/components/game/GamesQuestions.jsx
Normal file
13
src/components/game/GamesQuestions.jsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function GameQuestions({ blocks }) {
|
||||||
|
if (!blocks) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{blocks.map((block, id) => (
|
||||||
|
<div key={id}>{block.attrs.objectBehaviourDescription}</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user