56 lines
1.2 KiB
Svelte
56 lines
1.2 KiB
Svelte
<script>
|
|
import Education16 from 'carbon-icons-svelte/lib/Education16';
|
|
import Catalog16 from 'carbon-icons-svelte/lib/Catalog16';
|
|
// import Chip from '../Chip/index.svelte';
|
|
import { courses } from './store';
|
|
</script>
|
|
|
|
<div class="courses">
|
|
{#each $courses as courseData}
|
|
<div class="course">
|
|
<h4 class="course-title">
|
|
<a rel="prefetch" href="/courses/{courseData.id}">{courseData.title}</a>
|
|
<!-- <Chip
|
|
value={courseData.chipLabel}
|
|
className={courseData.chipClassName}
|
|
/> -->
|
|
</h4>
|
|
<p>{courseData.description}</p>
|
|
<!-- <div class="flex mt-3 mb-2">
|
|
<span class="flex mr-2"
|
|
><Education16 class="mr-2" />
|
|
5</span
|
|
>
|
|
<span class="flex"
|
|
><Catalog16 class="mr-2" />
|
|
20</span
|
|
>
|
|
</div> -->
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.courses {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 0 40px;
|
|
}
|
|
|
|
.course {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 5px 0 10px;
|
|
}
|
|
|
|
.course-title {
|
|
width: fit-content;
|
|
font-size: 18px;
|
|
}
|
|
|
|
span {
|
|
color: #586069;
|
|
font-size: 12px;
|
|
width: 40px;
|
|
}
|
|
</style>
|