57 lines
3.5 KiB
PHP
57 lines
3.5 KiB
PHP
<div x-data="{ canShare: !!navigator.share }" class="flex flex-wrap gap-2 {{ $class }}">
|
|
@foreach ($services as $service)
|
|
<a x-show="!canShare"
|
|
x-cloak
|
|
class="inline-flex items-center justify-center rounded-md border border-theme-border bg-theme-surface p-2 transition-all duration-200 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-theme-surface focus:ring-offset-2"
|
|
href="{{ $service->url() }}"
|
|
target="_blank"
|
|
rel="noopener nofollow"
|
|
title="{{ $service->label }}">
|
|
@php
|
|
$iconPath = storage_path('app/public/app-images/' . $service->name . '.svg');
|
|
@endphp
|
|
@if(file_exists($iconPath))
|
|
<img src="{{ asset('storage/app-images/' . $service->name . '.svg') }}" alt="{{ $service->label }}" class="h-6 w-6" />
|
|
@else
|
|
<span class="inline-flex h-6 w-6 items-center justify-center">
|
|
{!! $service->icon() !!}
|
|
</span>
|
|
@endif
|
|
</a>
|
|
@endforeach
|
|
|
|
<button
|
|
x-show="canShare"
|
|
x-cloak
|
|
@click="navigator.share({ url: window.location.href })"
|
|
class="inline-flex items-center justify-center rounded-md border border-theme-border bg-theme-surface p-2 transition-all duration-200 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-theme-surface focus:ring-offset-2"
|
|
title="{{ __('Share') }}"
|
|
type="button">
|
|
<span class="inline-flex h-6 w-6 items-center justify-center">
|
|
<svg 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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
x-data="{ copied: false }"
|
|
@click="navigator.clipboard.writeText(window.location.href); copied = true; setTimeout(() => copied = false, 2000)"
|
|
class="inline-flex items-center justify-center rounded-md border border-theme-border bg-theme-surface p-2 transition-all duration-200 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-theme-surface focus:ring-offset-2"
|
|
:title="copied ? '{{ __('Copied!') }}' : '{{ __('Copy link') }}'"
|
|
type="button">
|
|
<span class="inline-flex h-6 w-6 items-center justify-center">
|
|
<template x-if="!copied">
|
|
<svg 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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
|
|
</svg>
|
|
</template>
|
|
<template x-if="copied">
|
|
<svg 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 text-green-500">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
</svg>
|
|
</template>
|
|
</span>
|
|
</button>
|
|
</div>
|