Add artist review page and components with basic layout and styling

pages/index.vue

@@ -1,5 +1,13 @@
+<script setup>
+const { data: participants } = await useFetch('/api/participants')
+</script>
+
 <template>
     <div>
-        <h1>Index</h1>
+        <div class="grid md:grid-cols-2 gap-4">
+            <div v-for="participant in participants" :key="participant.id">
+                <ArtistListItem :runningOrder="participant.runningOrder" :country="participant.country" :artist="participant.artist" :title="participant.title" :flag="participant.flag" :artistID="participant.id" />
+            </div>
+        </div>
     </div>
 </template>

pages/login.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: 'login'
+})
+</script>
+
 <template>
     <div>
         <h1>Login</h1>

pages/profile.vue

@@ -0,0 +1,4 @@
+<template>
+    <h1>Profile</h1>
+</template>
+    

pages/review/[id].vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+const { id } = useRoute().params
+
+interface Artist {
+    id: number
+    year: number
+    country: string
+    artist: string
+    title: string
+    runningOrder: number
+    lyricsOriginal: string
+    lyricsTranslationFI: string
+    tags: string[]
+    img: string
+    flag: string
+}
+
+const { data: artist } = await useFetch<Artist>(`/api/artist?id=${id}`)
+
+// State for toggling lyrics visibility
+const showOriginalLyrics = ref(false)
+const toggleOriginalLyrics = () => {
+    showOriginalLyrics.value = !showOriginalLyrics.value
+}
+
+const showTranslationLyrics = ref(false)
+const toggleTranslationLyrics = () => {
+    showTranslationLyrics.value = !showTranslationLyrics.value
+}
+
+const submitReview = () => {
+    // Get slider values
+    const songEl = document.getElementById('slider-song') as HTMLInputElement
+    const showEl = document.getElementById('slider-show') as HTMLInputElement
+    const costumeEl = document.getElementById('slider-costume') as HTMLInputElement
+    
+    const songRating = songEl?.value || '0'
+    const showRating = showEl?.value || '0'
+    const costumeRating = costumeEl?.value || '0'
+    
+    // Create review object
+    const review = {
+        artistId: id,
+        ratings: {
+            song: parseInt(songRating),
+            show: parseInt(showRating),
+            costume: parseInt(costumeRating)
+        },
+        timestamp: new Date().toISOString()
+    }
+    
+    console.log('Submitting review:', review)
+    
+    // TODO: Send review to API
+    // await useFetch('/api/reviews', {
+    //   method: 'POST',
+    //   body: review
+    // })
+}
+</script>
+
+<template>
+    <div v-if="artist" class="space-y-4">
+        <div>
+            <h1 class="text-2xl font-bold text-center">{{ artist.artist }}</h1>
+            <p class="text-center italic">{{ artist.title }}</p>
+        </div>
+        <img class="w-1/2 mx-auto" :src="artist.img" alt="">
+        <div>
+            <h2 
+                @click="toggleOriginalLyrics" 
+                class="cursor-pointer hover:text-blue-600 flex items-center"
+            >
+                Sanat
+                <span class="ml-2 text-sm">
+                    {{ showOriginalLyrics ? '▼' : '►' }}
+                </span>
+            </h2>
+            <pre v-show="showOriginalLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyricsOriginal }}</pre>
+        </div>
+        <div v-if="artist.lyricsTranslationFI">
+            <h2 
+                @click="toggleTranslationLyrics" 
+                class="cursor-pointer hover:text-blue-600 flex items-center"
+            >
+                Käännös
+                <span class="ml-2 text-sm">
+                    {{ showTranslationLyrics ? '▼' : '►' }}
+                </span>
+            </h2>
+            <pre v-show="showTranslationLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyricsTranslationFI }}</pre>
+        </div>
+        <ul>
+            <li class="tag" v-for="tag in artist.tags" :key="tag">{{ tag }}</li>
+        </ul>
+        <form @submit.prevent="submitReview">
+            <ReviewSlider id="song" category="Kappale"/>
+            <ReviewSlider id="show" category="Lava show"/>
+            <ReviewSlider id="costume" category="Asuste"/>
+            <button type="submit" class="btn-primary">Arvostele</button>
+        </form>
+    </div>
+    <div v-else>
+        <h1>Artist not found</h1>
+    </div>
+</template>
+
+<style>
+.tag {
+    display: inline-block;
+    padding: 2px 6px;
+    background-color: #ccc;
+    margin: 2px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+}
+
+.lyricsFont {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 0.8rem;
+    text-align: center;
+}
+</style>