<template>
  <div :class="['page', styleType]">
    <div
      class="font-bold mb-5 grid grid-cols-1 sm:grid-cols-auto-1fr items-center gap-x-5"
    >
      <div class="text-xl leading-5">
        <span>Wednesday 30th September 2024</span> <span>12:00 PM</span>
      </div>
      <div class="text-6xl text-right">😀</div>
    </div>
    <div class="word-break-wrap text-justify flex-grow">
      {{ content }}
    </div>
    <div class="grid gap-2 mt-5 grid-cols-1 sm:grid-cols-3">
      <div v-for="i in 10" :key="i" class="regular-image">
        <img
          src="https://placehold.co/600x400"
          alt="Regular Image"
          class="w-full h-full object-cover"
        />
      </div>
    </div>
    <div class="text-right">1</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  content: {
    type: String,
    required: true,
  },
  styleType: {
    type: String,
    default: 'plain',
    validator: (value) => ['plain', 'lined', 'graph', 'dotted'].includes(value),
  },
})
</script>

<style scoped>
.word-break-wrap {
  word-break: break-word;
  word-wrap: break-word;
}

.page.plain {
  background-color: #fff;
}

.page.lined {
  background: linear-gradient(white 95%, lightgrey 96%) repeat-y;
  background-size: 100% 20px;
}

.page.graph {
  background-image: linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 25px 25px;
}

.page.dotted {
  background-image: radial-gradient(#000 1px, white 1px);
  background-size: 10px 10px;
}
</style>

<template>
  <div :class="['page', styleType]">
    <div
      class="font-bold mb-5 grid grid-cols-1 sm:grid-cols-auto-1fr items-center gap-x-5"
    >
      <div class="text-xl leading-5">
        <span>Wednesday 30th September 2024</span> <span>12:00 PM</span>
      </div>
      <div class="text-6xl text-right">😀</div>
    </div>
    <div class="word-break-wrap text-justify flex-grow">
      {{ content }}
    </div>
    <div class="grid gap-2 mt-5 grid-cols-1 sm:grid-cols-3">
      <div v-for="i in 10" :key="i" class="regular-image">
        <img
          src="https://placehold.co/600x400"
          alt="Regular Image"
          class="w-full h-full object-cover"
        />
      </div>
    </div>
    <div class="text-right">1</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  content: {
    type: String,
    required: true,
  },
  styleType: {
    type: String,
    default: 'plain',
    validator: (value) => ['plain', 'lined', 'graph', 'dotted'].includes(value),
  },
})
</script>

<style scoped>
.word-break-wrap {
  word-break: break-word;
  word-wrap: break-word;
}

.page.plain {
  background-color: #fff;
}

.page.lined {
  background: linear-gradient(white 95%, lightgrey 96%) repeat-y;
  background-size: 100% 20px;
}

.page.graph {
  background-image: linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 25px 25px;
}

.page.dotted {
  background-image: radial-gradient(#000 1px, white 1px);
  background-size: 10px 10px;
}
</style>

<template>
  <div class="page" data-density="hard">Cover</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

<template>
  <div class="page" data-density="hard">Cover</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>