24 lines
682 B
Svelte
24 lines
682 B
Svelte
<script lang="ts">
|
|
import type { Skill } from '$lib/data/types';
|
|
import Icon from '@iconify/svelte';
|
|
|
|
let { skills }: { skills: Skill[] } = $props();
|
|
</script>
|
|
|
|
<div class="-mx-5 grid md:grid-cols-2 lg:grid-cols-3 gap-7 text-center p-5">
|
|
{#each skills as skill}
|
|
<!-- <div class="px-5"> -->
|
|
<!-- w-full md:basis-1/2 lg:basis-1/3 -->
|
|
<div class="rounded-xl bg-gray-50 p-2 sm:p-8 lg:px-6 xl:px-9">
|
|
<Icon icon={skill.icon} class="text-5xl mx-auto mb-5" />
|
|
<div>
|
|
<h3 class="mb-4 text-lg font-medium sm:text-xl lg:text-lg xl:text-xl">{skill.title}</h3>
|
|
<p class="text-lg font-light">
|
|
{skill.text}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
{/each}
|
|
</div>
|