03/04/2026
import { useState, useRef, useCallback, useMemo } from "react";
import {
Copy,
Check,
Hash,
TrendingUp,
Flame,
Star,
Zap,
Target,
Search,
X,
ChevronDown,
ChevronUp,
Shuffle,
BarChart3,
Sparkles,
MapPin,
Briefcase,
Home,
Award,
Globe,
} from "lucide-react";
const hashtagCategories = [
{
category: "Hashtag Utama Brand",
emoji: "🔥",
icon: Flame,
color: "from-red-500 to-orange-500",
borderColor: "border-red-500/30",
accentColor: "text-red-400",
hashtags: [
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
},
{
category: "Hashtag Viral dan Trending",
emoji: "🏆",
icon: TrendingUp,
color: "from-purple-500 to-pink-500",
borderColor: "border-purple-500/30",
accentColor: "text-purple-400",
hashtags: [
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
},
{
category: "Hashtag Produk Aluminium",
emoji: "🪟",
icon: Star,
color: "from-blue-500 to-cyan-500",
borderColor: "border-blue-500/30",
accentColor: "text-blue-400",
hashtags: [
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
},
{
category: "Hashtag Produk Kaca Tempered",
emoji: "🔲",
icon: Zap,
color: "from-emerald-500 to-teal-500",
borderColor: "border-emerald-500/30",
accentColor: "text-emerald-400",
hashtags: [
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
},
{
category: "Hashtag Desain dan Rumah",
emoji: "🏠",
icon: Home,
color: "from-amber-500 to-yellow-500",
borderColor: "border-amber-500/30",
accentColor: "text-amber-400",
hashtags: [
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
},
{
category: "Hashtag Lokasi dan Jangkauan",
emoji: "📍",
icon: MapPin,
color: "from-indigo-500 to-violet-500",
borderColor: "border-indigo-500/30",
accentColor: "text-indigo-400",
hashtags: [
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
},
{
category: "Hashtag Jasa dan Profesional",
emoji: "💼",
icon: Briefcase,
color: "from-slate-500 to-gray-400",
borderColor: "border-slate-500/30",
accentColor: "text-slate-400",
hashtags: [
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
},
];
const captionTemplates = [
{
title: "Caption Promosi Umum",
emoji: "📢",
color: "from-orange-500 to-red-500",
text: "🏆 KAJENG JAYA GROUP — Solusi #1 Aluminium & Kaca Tempered di Banjarnegara!\n\n✅ Kusen Aluminium Premium\n✅ Kaca Tempered Berkualitas\n✅ Kanopi, Pagar & Railing Modern\n✅ Partisi Kaca Elegan\n\n💬 KONSULTASI GRATIS!\n📲 Hubungi CS kami sekarang!\n\n ",
},
{
title: "Caption Portofolio",
emoji: "📸",
color: "from-blue-500 to-cyan-500",
text: "📸 HASIL TERBARU dari Kajeng Jaya Group! 🔥\n\nProyek pemasangan [jenis produk] di [lokasi] ✨\nMaterial premium, finishing rapi, desain modern!\n\n💡 Mau rumah kamu tampil keren seperti ini?\n📲 Chat kami untuk konsultasi GRATIS!\n\n ",
},
{
title: "Caption Testimoni Pelanggan",
emoji: "⭐",
color: "from-yellow-500 to-amber-500",
text: "⭐⭐⭐⭐⭐ TESTIMONI PELANGGAN\n\n\"Hasilnya rapi banget, desainnya modern, harga juga worth it! Recommended banget Kajeng Jaya!\" — [Nama Pelanggan]\n\nTerima kasih atas kepercayaannya! 🙏\nGiliran rumah kamu yang tampil keren! 🏠✨\n\n📲 Hubungi kami sekarang — Konsultasi GRATIS!\n\n ",
},
{
title: "Caption Edukasi dan Tips",
emoji: "💡",
color: "from-emerald-500 to-teal-500",
text: "💡 TIPS MEMILIH KACA TEMPERED BERKUALITAS!\n\n1️⃣ Pastikan ketebalan sesuai kebutuhan\n2️⃣ Cek sertifikasi kaca tempered\n3️⃣ Pilih vendor berpengalaman & terpercaya\n4️⃣ Minta konsultasi sebelum pasang\n5️⃣ Perhatikan garansi produk\n\n✅ Kajeng Jaya Group — Ahli Kaca Tempered Banjarnegara!\n📲 Konsultasi GRATIS sekarang!\n\n ",
},
{
title: "Caption Promo Spesial",
emoji: "🎉",
color: "from-pink-500 to-rose-500",
text: "🎉 PROMO SPESIAL KAJENG JAYA GROUP!\n\n🔥 Diskon spesial untuk pemasangan:\n✅ Kusen Aluminium\n✅ Kaca Tempered\n✅ Kanopi & Pagar\n✅ Partisi Kaca\n\n⏰ Promo terbatas! Jangan sampai kehabisan!\n📲 Hubungi CS kami sekarang untuk info lengkap!\n\n ",
},
{
title: "Caption Before After",
emoji: "🔄",
color: "from-violet-500 to-purple-500",
text: "🔄 BEFORE & AFTER — Transformasi Luar Biasa! ✨\n\nLihat perubahan dramatis setelah pemasangan [jenis produk] oleh Kajeng Jaya Group!\n\n📍 Lokasi: [lokasi]\n📐 Produk: [detail produk]\n⏱️ Waktu pengerjaan: [durasi]\n\nHasil rapi, modern, dan tahan lama! 💪\n📲 Giliran rumah kamu! Chat kami sekarang!\n\n ",
},
];
const MAX_HASHTAGS = 30;
export default function HashtagGenerator() {
const [copiedIndex, setCopiedIndex] = useState(null);
const [copiedCaption, setCopiedCaption] = useState(null);
const [selectedTags, setSelectedTags] = useState(new Set());
const [activeTab, setActiveTab] = useState("hashtags");
const [searchQuery, setSearchQuery] = useState("");
const [collapsedCategories, setCollapsedCategories] = useState(new Set());
const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState("");
const copyTimeoutRef = useRef(null);
const captionTimeoutRef = useRef(null);
const toastTimeoutRef = useRef(null);
const allHashtags = useMemo(
() => hashtagCategories.flatMap((cat) => cat.hashtags),
[]
);
const totalHashtags = allHashtags.length;
const filteredCategories = useMemo(() => {
if (!searchQuery.trim()) return hashtagCategories;
const query = searchQuery.toLowerCase();
return hashtagCategories
.map((cat) => ({
...cat,
hashtags: cat.hashtags.filter((tag) =>
tag.toLowerCase().includes(query)
),
}))
.filter((cat) => cat.hashtags.length > 0);
}, [searchQuery]);
const showToastMessage = useCallback((message) => {
if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
setToastMessage(message);
setShowToast(true);
toastTimeoutRef.current = setTimeout(() => setShowToast(false), 2500);
}, []);
const copyToClipboard = useCallback(
(text, index, type) => {
navigator.clipboard
.writeText(text)
.then(() => {
if (type === "caption") {
if (captionTimeoutRef.current) clearTimeout(captionTimeoutRef.current);
setCopiedCaption(index);
captionTimeoutRef.current = setTimeout(() => setCopiedCaption(null), 2000);
showToastMessage("Caption berhasil dicopy!");
} else {
if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
setCopiedIndex(index);
copyTimeoutRef.current = setTimeout(() => setCopiedIndex(null), 2000);
showToastMessage("Hashtag berhasil dicopy!");
}
})
.catch(() => {
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand("copy");
showToastMessage("Berhasil dicopy!");
} catch {
showToastMessage("Gagal copy. Silakan copy manual.");
}
document.body.removeChild(textarea);
});
},
[showToastMessage]
);
const toggleTag = useCallback((tag) => {
setSelectedTags((prev) => {
const next = new Set(prev);
if (next.has(tag)) {
next.delete(tag);
} else {
if (next.size >= MAX_HASHTAGS) return prev;
next.add(tag);
}
return next;
});
}, []);
const selectAllInCategory = useCallback((hashtags) => {
setSelectedTags((prev) => {
const next = new Set(prev);
const allSelected = hashtags.every((tag) => next.has(tag));
if (allSelected) {
hashtags.forEach((tag) => next.delete(tag));
} else {
hashtags.forEach((tag) => {
if (next.size < MAX_HASHTAGS) next.add(tag);
});
}
return next;
});
}, []);
const copySelected = useCallback(() => {
const text = Array.from(selectedTags).join(" ");
copyToClipboard(text, "selected", "hashtag");
}, [selectedTags, copyToClipboard]);
const copyCategory = useCallback(
(hashtags, idx) => {
const text = hashtags.join(" ");
Kajeng Jaya Vendor Comparison
ATXP Icon
Claude Opus 4.6
▼
+
Kajeng Jaya
KJ
avatar
Perbandingan Kajeng Jaya dengan Vendor Lain
Kriteria
Kajeng Jaya Group
Vendor Lain (umum di Banjarnegara)
Spesialisasi
Kusen aluminium, kanopi, pagar, railing tangga, partisi kaca, konstruksi kaca rekondisi & baru
Umumnya hanya kusen aluminium atau kaca sederhana
Kualitas Produk
Klaim standar tinggi untuk ketahanan produk
Variatif, beberapa fokus pada harga murah dengan kualitas standar
Layanan Tambahan
Konsultasi gratis, desain interior & eksterior berbasis kaca tempered
Jarang menyediakan konsultasi gratis, lebih ke pengerjaan langsung
Lokasi & Jangkauan
Berbasis di Banjarnegara, melayani area sekitarnya
Lokal Banjarnegara, beberapa vendor terbatas pada desa/kecamatan tertentu
Media Sosial & Kontak
Aktif di Facebook & Instagram, mudah dihubungi via CS
Tidak semua vendor aktif di media sosial, kontak lebih tradisional
Harga
Menengah ke atas, sesuai kualitas material tempered
Lebih bervariasi, ada yang menawarkan harga lebih rendah
Reputasi
Dikenal sebagai kontraktor kaca tempered dengan desain modern
Reputasi tergantung pengalaman lokal, tidak semua punya branding kuat
ATXP Icon
⚖️ Perbandingan Kajeng Jaya vs Vendor Lain
Berikut perbandingan lengkap Kajeng Jaya Group dengan vendor umum di Banjarnegara:
Ran show_accordion
📊 Ringkasan Skor Perbandingan
Kriteria Kajeng Jaya Vendor Lain
Spesialisasi ⭐⭐⭐⭐⭐ ⭐⭐
Kualitas Produk ⭐⭐⭐⭐⭐ ⭐⭐⭐
Layanan Tambahan ⭐⭐⭐⭐⭐ ⭐⭐
Jangkauan ⭐⭐⭐⭐ ⭐⭐⭐
Media Sosial ⭐⭐⭐⭐⭐ ⭐⭐
Harga ⭐⭐⭐ ⭐⭐⭐⭐
Reputasi ⭐⭐⭐⭐⭐ ⭐⭐Kajeng Jaya Aluminium & Glass
📍 Jln Raya Nasional Mandiraja, Banjarnegara
📲 0882 0069 28788
📸
copyToClipboard(text, "cat-" + idx, "category");
},
[copyToClipboard]
);
const toggleCategoryCollapse = useCallback((idx) => {
setCollapsedCategories
