Refactor testimonial navigation handlers and improve timer management in Testimonials component
This commit is contained in:
@@ -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,7 +64,8 @@
|
||||
</h2>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="relative">
|
||||
<div class="bg-white p-8 rounded-xl shadow-sm">
|
||||
{#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}"
|
||||
@@ -70,15 +79,16 @@
|
||||
</p>
|
||||
</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"
|
||||
>
|
||||
→
|
||||
|
Reference in New Issue
Block a user