<template>
  <div>
    <h1 class="text-3xl font-bold mb-8">All Cheatsheets</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <CheatsheetCard v-for="cheatsheet in cheatsheets" :key="cheatsheet.id" :cheatsheet="cheatsheet" />
    </div>
  </div>
</template>

<script lang="ts">
import { mapState } from 'pinia'
import { useAppStore } from '../stores'
import CheatsheetCard from '../components/CheatsheetCard.vue'

export default {
  name: 'CheatsheetListView',
  components: {
    CheatsheetCard
  },
  computed: {
    ...mapState(useAppStore, ['cheatsheets'])
  }
}
</script>
