Skip to content

Commit

Permalink
Education Carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
xavierloeraflores committed May 29, 2024
1 parent 6772251 commit 26c8abd
Showing 1 changed file with 31 additions and 26 deletions.
57 changes: 31 additions & 26 deletions src/lib/components/education/education.svelte
Original file line number Diff line number Diff line change
@@ -1,31 +1,36 @@
<script lang="ts">
import EducationCard from "$lib/components/education/education-card.svelte"
import { type Education } from '../../../types';
import { Section, Button } from '$lib';
import {toast} from 'svelte-sonner'
import {Card, CardContent, CardTitle, CardDescription, CardFooter, CardHeader} from "$lib/components/ui/card"
import {GraduationCap } from 'lucide-svelte'
import { Separator} from '$lib/components/ui/separator'
import {Tabs, Trigger, Content, List} from '$lib/components/ui/tabs'
import EducationCard from '$lib/components/education/education-card.svelte';
import { type Education } from '../../../types';
import { Section, Button } from '$lib';
import { toast } from 'svelte-sonner';
import {
Card,
CardContent,
CardTitle,
CardDescription,
CardFooter,
CardHeader
} from '$lib/components/ui/card';
import { GraduationCap } from 'lucide-svelte';
import { Separator } from '$lib/components/ui/separator';
import { Tabs, Trigger, Content, List } from '$lib/components/ui/tabs';
import * as Carousel from '$lib/components/ui/carousel';
export let educationData: Education[] = [];
let degreeCount= educationData.length
export let educationData: Education[] = [];
let degreeCount = educationData.length;
</script>

<Section title="Education">
<GraduationCap size="64" class="color-primary-foreground my-4"/>
<Tabs class='max-w-[900px] sm:min-w-[500px] min-w-[200px] w-full'>
<List class={`flex flex-row justify-evenly w-full`}>
{#each educationData as edu}
<Trigger class="px-0 sm:px-3" value={edu.degree}>{edu.tab}</Trigger>
{/each}
</List>
{#each educationData as edu}
<Content value ={edu.degree}>
<EducationCard edu={edu}/>
</Content>
{/each}
</Tabs>

<Section title="Education">
<GraduationCap size="64" class="color-primary-foreground my-4" />
<Carousel.Root class="w-full min-w-[200px] max-w-[900px] sm:min-w-[500px]">
<Carousel.Content>
{#each educationData as edu}
<Carousel.Item class="">
<EducationCard {edu} />
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Previous class="mx-0 h-16 w-16 border-2 border-primary text-primary" />
<Carousel.Next class="mx-0 h-16 w-16 border-2 border-primary text-primary" />
</Carousel.Root>
</Section>

0 comments on commit 26c8abd

Please sign in to comment.