365DevNet/Tiber365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor testimonial navigation handlers and improve timer management in Testimonials component

Browse Source
This commit is contained in:
becarta
2025-05-16 01:12:01 +02:00
parent 4f0a849323
commit 3d1f64d8e5
1 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Testimonials.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { slide } from 'svelte/transition';
const testimonials = [
{
name: 'Sarah Johnson',
@@ -22,9 +23,16 @@
];
let currentIndex = 0;
let timer: ReturnType<typeof setTimeout>;
let timer: ReturnType<typeof setTimeout> | null = null;
const ROTATE_INTERVAL = 20000; // 20 seconds
function nextHandler() {
next();
}
function prevHandler() {
prev();
}
function next(reset = true) {
currentIndex = (currentIndex + 1) % testimonials.length;
if (reset) resetTimer();
@@ -36,7 +44,7 @@
}
function resetTimer() {
clearTimeout(timer);
if (timer) clearTimeout(timer);
timer = setTimeout(() => next(false), ROTATE_INTERVAL);
}
@@ -45,7 +53,7 @@
});
onDestroy(() => {
clearTimeout(timer);
if (timer) clearTimeout(timer);
});
</script>
@@ -56,29 +64,31 @@
</h2>
<div class="max-w-3xl mx-auto">
<div class="relative">
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="text-4xl mb-4">{testimonials[currentIndex].avatar}</div>
<p class="text-lg text-text/80 mb-6">
"{testimonials[currentIndex].content}"
</p>
<div>
<p class="font-heading font-semibold text-primary">
{testimonials[currentIndex].name}
</p>
<p class="text-text/60">
{testimonials[currentIndex].role}
{#if testimonials[currentIndex]}
<div class="bg-white p-8 rounded-xl shadow-sm" transition:slide|local>
<div class="text-4xl mb-4">{testimonials[currentIndex].avatar}</div>
<p class="text-lg text-text/80 mb-6">
"{testimonials[currentIndex].content}"
</p>
<div>
<p class="font-heading font-semibold text-primary">
{testimonials[currentIndex].name}
</p>
<p class="text-text/60">
{testimonials[currentIndex].role}
</p>
</div>
</div>
</div>
{/if}
<div class="flex justify-center mt-8 space-x-4">
<button
on:click={prev}
on:click={prevHandler}
class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
>
←
</button>
<button
on:click={next}
on:click={nextHandler}
class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
>
→