feat: implement share link

This commit is contained in:
log101 2024-02-14 10:46:55 +03:00
parent f568a4ad73
commit e9521b3e06
3 changed files with 57 additions and 3 deletions

View File

@ -89,7 +89,7 @@ const LocationButton = ({
)
} else {
return (
<div className='w-full h-[475px] p-4'>
<div className='w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded'>
{atTarget ? (
<div className='flex flex-col justify-center items-center image-wrapper'>
<img src={imageUrl} className='blur-2xl h-[450px]' />

View File

@ -0,0 +1,54 @@
import { Button } from "./ui/button"
const ShareButton = () => {
const shareLink = async () => {
const shareData = {
title: "Konulu Konum",
text: "Sevdiklerinizi şaşırtın!",
url: document.URL
}
await navigator.share(shareData)
}
const copyLink = async () => {
try {
await navigator.clipboard.writeText(document.URL)
// @ts-ignore
Toastify({
text: "Konulu konum kopyalandı.",
duration: 3000,
gravity: "top", // `top` or `bottom`
position: "center", // `left`, `center` or `right`
stopOnFocus: true, // Prevents dismissing of toast on hover
style: {
background: "black",
borderRadius: "6px",
margin: "16px"
},
onClick: function () {} // Callback after click
}).showToast()
} catch (err: any) {
console.error(err.message)
}
}
return (
<div>
{
//@ts-expect-error navigator is not always defined
window.navigator.share ? (
<Button className='w-full text-lg' size='lg' onClick={shareLink}>
Paylaş Mobil
</Button>
) : (
<Button className='w-full text-lg' size='lg' onClick={copyLink}>
Paylaş
</Button>
)
}
</div>
)
}
export default ShareButton

View File

@ -3,7 +3,7 @@ import '@/styles/globals.css';
import '../styles/locked-page.css';
import Layout from '../layouts/Layout.astro';
import { Button } from '@/components/ui/button';
import ShareButton from '../components/ShareButton';
import {
Card,
CardContent,
@ -81,7 +81,7 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
>
</div>
<Button className="w-full text-lg" size="lg">Paylaş</Button>
<ShareButton client:only />
<div class="flex justify-center">
<p class="text-muted-foreground">
Fotoğrafın kilidi şu ana dek <b>{data?.unlocked_counter}</b> kez açıldı