64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
|
|
type WorkShareActionsProps = {
|
|
title: string;
|
|
url: string;
|
|
};
|
|
|
|
export default function WorkShareActions({ title, url }: WorkShareActionsProps) {
|
|
const [status, setStatus] = useState("");
|
|
|
|
const shareText = useMemo(
|
|
() => `Mira esto que encontre en Makers3D: ${title}`,
|
|
[title]
|
|
);
|
|
const whatsappHref = `https://wa.me/?text=${encodeURIComponent(`${shareText}\n${url}`)}`;
|
|
|
|
async function copyLink() {
|
|
try {
|
|
await navigator.clipboard.writeText(url);
|
|
setStatus("Enlace copiado.");
|
|
} catch {
|
|
setStatus("No se pudo copiar. Manten presionado el enlace.");
|
|
}
|
|
}
|
|
|
|
async function shareWork() {
|
|
if (navigator.share) {
|
|
try {
|
|
await navigator.share({
|
|
title,
|
|
text: shareText,
|
|
url
|
|
});
|
|
setStatus("Listo para compartir.");
|
|
return;
|
|
} catch (error) {
|
|
const shareError = error as Error;
|
|
if (shareError.name === "AbortError") {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
await copyLink();
|
|
}
|
|
|
|
return (
|
|
<div className="work-detail-share-actions">
|
|
<button type="button" className="button button-primary" onClick={shareWork}>
|
|
Compartir
|
|
</button>
|
|
<a className="work-detail-share-option" href={whatsappHref} target="_blank" rel="noreferrer">
|
|
WhatsApp
|
|
</a>
|
|
<button type="button" className="work-detail-share-option" onClick={copyLink}>
|
|
Copiar enlace
|
|
</button>
|
|
{status ? <span className="work-detail-share-status">{status}</span> : null}
|
|
</div>
|
|
);
|
|
}
|