dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add social media icons for Instagram, Facebook, and TikTok in the Welcome component

Browse Source
This commit is contained in:
Yoga Pangestu 2026-09-03 19:12:46 +07:00
parent dc97b9bc61
commit 005d071d3a
1 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/pages/welcome.tsx
View File

@ -12,7 +12,9 @@ import {
ArrowRight,
Check,
ChevronRight,
Facebook,
Info,
Instagram,
LogIn,
Mail,
MapPin,
@ -24,6 +26,14 @@ import {
} from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
function TiktokIcon({ className }: { className?: string }) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
<path d="M16.6 5.82c-.7-.77-1.09-1.77-1.09-2.82h-3.13v13.14c0 1.53-1.24 2.77-2.77 2.77a2.77 2.77 0 0 1-2.77-2.77 2.77 2.77 0 0 1 2.77-2.77c.29 0 .56.04.82.12v-3.17a5.9 5.9 0 0 0-.82-.06A5.9 5.9 0 0 0 3.75 16.1a5.9 5.9 0 0 0 5.86 5.9 5.9 5.9 0 0 0 5.9-5.9V9.13a7.83 7.83 0 0 0 4.58 1.47V7.47a4.85 4.85 0 0 1-3.49-1.65z" />
</svg>
);
}
type Props = {
appName: string;
aboutApp: string | null;
@ -617,22 +627,45 @@ export default function Welcome({
<li><a href="#about" className="hover transition-colors">Tentang Kami</a></li>
<li><a href="#order-guide" className="hover transition-colors">Cara Pemesanan</a></li>
<li><a href="#contact" className="hover transition-colors">Hubungi Kami</a></li>
<li><a href="/admin/dashboard" className="hover transition-colors font-semibold">Login Dashboard Admin</a></li>
</ul>
</div>
<div className="space-y-3">
<h4 className="text-xs uppercase font-bold text-slate-800 tracking-widest">Sosial Media</h4>
<p className="text-xs text-slate-400 font-light">Ikuti sosial media kami untuk mendapatkan update produk terbaru.</p>
<div className="flex space-x-3 text-xs">
<div className="flex items-center space-x-3">
{instagramUrl && (
<a href={instagramUrl} target="_blank" rel="noreferrer" className="text-slate-400 hover">Instagram</a>
<a
href={instagramUrl}
target="_blank"
rel="noreferrer"
aria-label="Instagram"
className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
>
<Instagram className="w-4 h-4" />
</a>
)}
{facebookUrl && (
<a href={facebookUrl} target="_blank" rel="noreferrer" className="text-slate-400 hover">Facebook</a>
<a
href={facebookUrl}
target="_blank"
rel="noreferrer"
aria-label="Facebook"
className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
>
<Facebook className="w-4 h-4" />
</a>
)}
{tiktokUrl && (
<a href={tiktokUrl} target="_blank" rel="noreferrer" className="text-slate-400 hover">TikTok</a>
<a
href={tiktokUrl}
target="_blank"
rel="noreferrer"
aria-label="TikTok"
className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
>
<TiktokIcon className="w-4 h-4" />
</a>
)}
</div>
</div>