Custom Style for All Cards

'use client'

import {
  FlashcardArray,
  useFlashcardArray,
  type IFlashcard,
} from 'react-quizlet-flashcard'
import 'react-quizlet-flashcard/dist/index.css'

const deck: IFlashcard[] = [...]

function CustomStyleAllCards() {
  const flipArrayHook = useFlashcardArray({
    deckLength: deck.length,
  })

  return (
    <FlashcardArray
      deck={deck.map((card) => ({
        ...card,
        front: {
          ...card.front,
          style: {
            backgroundColor: 'lightgoldenrodyellow',
            color: 'black',
            display: 'grid',
            gridTemplateColumns: '1fr',
            gridTemplateRows: '1fr 1fr 1fr',
            gap: '10px',
            padding: '10px',
          },
        },
        back: {
          ...card.back,
          style: {
            backgroundColor: 'lightgoldenrodyellow',
            color: 'black',
            display: 'grid',
            gridTemplateColumns: '1fr',
            gridTemplateRows: '1fr 1fr 1fr',
            gap: '10px',
            padding: '10px',
          },
        },
      }))}
      flipArrayHook={flipArrayHook}
    />
  )
}