Components
Loading preview...
This isd achievement unlocked component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/achievement-unlockedimport { useState } from "react"
import { AchievementUnlocked } from "@/components/ui/achievement-unlocked"
export default function DemoOne() {
const [open, setOpen] = useState(false)
return (
<>
<button
type="button"
onClick={() => setOpen(true)}
className="rounded-lg border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
>
Unlock achievement
</button>
<AchievementUnlocked
achievement={{
id: "task-champion",
name: "Task Champion",
description: "Complete a task 30 days in a row. Congratulations!!",
unlockedAt: new Date().toISOString(),
}}
open={open}
onOpenChange={setOpen}
secondaryActionLabel="Share"
onSecondaryActionClick={() => {
navigator.share?.({
title: "I unlocked Task Champion!",
text: "Complete a task 30 days in a row. Congratulations!!",
url: window.location.href,
})
}}
/>
</>
)
}