56 lines
2.1 KiB
Svelte
56 lines
2.1 KiB
Svelte
<script>
|
|
import { onMount } from "svelte";
|
|
import SvgIcon from "@jamescoyle/svelte-icon";
|
|
import { mdiCalendarRange, mdiPlus, mdiAccount, mdiSchool } from "@mdi/js";
|
|
import "$lib/css/slide.css";
|
|
import { formatMonth } from "$lib/js/date.js";
|
|
|
|
export let active = false;
|
|
export let data;
|
|
|
|
const title = data.title;
|
|
const description = data.description;
|
|
const issued_date = formatMonth(data.date_done).charAt(0).toUpperCase()+formatMonth(data.date_done).slice(1);
|
|
const project_type = data.type_project;
|
|
let picture;
|
|
onMount(async () => {
|
|
picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
|
|
});
|
|
</script>
|
|
|
|
<div class="slide-container">
|
|
<div class="slide-main {active ? '' : 'slide-unactive'}">
|
|
<div class="slide-img-container">
|
|
<img class="slide-img" src={picture} alt="Projects" />
|
|
</div>
|
|
<div class="slide-text-container">
|
|
<h1 class="slide-title">{title}</h1>
|
|
<div class="slide-img-mobile-container">
|
|
<img class="slide-img-mobile" src={picture} alt="Projects" />
|
|
</div>
|
|
<div class="slide-subtitle-container">
|
|
<SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
|
|
<p class="slide-subtitle slide-aftericon">
|
|
{issued_date}
|
|
</p>
|
|
</div>
|
|
<div class="slide-subtitle-container">
|
|
<SvgIcon size="35" path={project_type == "School" ? mdiSchool : mdiAccount} type="mdi" />
|
|
<p class="slide-subtitle slide-aftericon">
|
|
{project_type}
|
|
</p>
|
|
</div>
|
|
<div class="slide-subtitle-container">
|
|
<p class="slide-subtitle slide-text slide-overflow slide-justify">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
<div class="slide-button-container">
|
|
<button class="slide-button">
|
|
<SvgIcon size="20" path={mdiPlus} type="mdi" />
|
|
More</button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|