44107c0734
Some checks failed
Build and publish / build (push) Failing after 19s
Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first concrete adapter consuming the libreshop toolkit. Builds and publishes git.librete.ch/libreshop/shop on every main / v* push via the standard .gitea/workflows/build.yml shared across libreshop components.
96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<template>
|
|
<div class="mx-auto text-center md:max-w-xl lg:max-w-3xl mb-3">
|
|
<Heading :level="1" html-tag="h2" v-if="showTitle">{{ title }}</Heading>
|
|
<p v-if="description" class="mb-6 pb-2 text-gray-800 md:mb-12 md:pb-0">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-6 text-center md:grid-cols-3 lg:gap-12">
|
|
<div v-for="(testimonial, index) in testimonials" :key="index" class="mb-12 md:mb-0">
|
|
<p class="mb-4 text-gray-800">
|
|
<span v-if="showQuoteIcon" class="inline-block pe-2" :style="{ color: primaryColor }">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 512" class="w-5 h-5">
|
|
<path
|
|
d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
{{ testimonial.comment }}
|
|
</p>
|
|
<ul v-if="showRating" class="mb-0 flex items-center justify-center">
|
|
<li v-for="i in 5" :key="i">
|
|
<svg
|
|
v-if="i <= testimonial.rating"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="h-5 w-5"
|
|
:style="{ color: starColor }"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="h-5 w-5"
|
|
:style="{ color: starColor }"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
|
|
/>
|
|
</svg>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
interface Testimonial {
|
|
name?: string;
|
|
role?: string;
|
|
avatar?: string;
|
|
comment: string;
|
|
rating: number;
|
|
}
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
testimonials: Testimonial[];
|
|
title?: string;
|
|
description?: string;
|
|
primaryColor?: string;
|
|
starColor?: string;
|
|
showTitle?: boolean;
|
|
showName?: boolean;
|
|
showRole?: boolean;
|
|
showAvatar?: boolean;
|
|
showRating?: boolean;
|
|
showQuoteIcon?: boolean;
|
|
}>(),
|
|
{
|
|
title: "Kundenstimmen",
|
|
description: "",
|
|
primaryColor: "black",
|
|
starColor: "#fbbf24",
|
|
showTitle: true,
|
|
showName: true,
|
|
showRole: true,
|
|
showAvatar: true,
|
|
showRating: true,
|
|
showQuoteIcon: true
|
|
}
|
|
);
|
|
</script>
|