show image list, use strong type for data from API

This commit is contained in:
schooltechx 2023-04-10 11:33:42 +07:00
parent 785ccc10a7
commit 0348e6b72e
7 changed files with 26 additions and 17 deletions

View file

@ -1,4 +1,5 @@
import {qualifyingBase} from '$lib/data/CMSDataType'
import type {Exam} from '$lib/data/CMSDataType'
import { error } from '@sveltejs/kit'
import dayjs from 'dayjs'
import type { PageServerLoad } from './$types'
@ -11,7 +12,7 @@ export const load: PageServerLoad = async ({params,fetch}) => {
if(!res.ok){
throw error(500,{message:`พบข้อผิดพลาดเกี่ยวกับข้อมูลสอบคัดเลือก ${id}`})
}
const post = await res.json()
const post:Exam = await res.json()
post.date= post.start? dayjs(post.start).format("DD MMM BBBB"):""
return post
}

View file

@ -34,12 +34,18 @@
<div class="">
{@html data.detail}
</div>
{#if data.images}
{#each data.images as i}
<div><img src={i.url} alt={i.title}></div>
{/each}
{/if}
{#if data.files}
{#each data.files as file}
<hr class="border-blueGray-200 mb-4 mt-4" />
<div class="text-lg py-1">
<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600" target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
</div>
<hr class="border-blueGray-200 mb-4 mt-4" />
<div class="text-lg py-1">
<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600" target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
</div>
{/each}
{/if}
<hr class="border-blueGray-200 my-7" />