Skip to main content

Content & marketing

Testimonial code

Copy the implementation or inspect every file that belongs to this component unit.

resources/views/components/ui/testimonial.blade.php

@props([
    'author',
    'role' => null,
    'avatar' => null,
    'rating' => null,
])

@php
    /*
    | Customer quote card. Quote goes in the slot.
    |
    | Usage:
    |   <x-ui.testimonial author="Ada Lovelace" role="CTO, Analytical" rating="5">
    |       This tool changed how our team ships.
    |   </x-ui.testimonial>
    */
@endphp

<figure {{ $attributes->merge(['class' => 'flex flex-col rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 shadow-sm']) }}>
    @if ($rating)
        <div class="flex gap-0.5 text-amber-400">
            @for ($i = 0; $i < (int) $rating; $i++)
                <x-ui.icon name="star" weight="fill" size="base" />
            @endfor
        </div>
    @endif

    <blockquote class="mt-4 flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
        {{ $slot }}
    </blockquote>

    <figcaption class="mt-6 flex items-center gap-3">
        <x-ui.avatar :name="$author" :src="$avatar" size="base" />
        <div>
            <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ $author }}</div>
            @if ($role)
                <div class="text-xs text-gray-500 dark:text-gray-400">{{ $role }}</div>
            @endif
        </div>
    </figcaption>
</figure>