Quick Start Guide

const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  if (!emailRegex.test(email)) return showErrorToast("Please add a valid email address!")
  loginWithOtp(email)
  showSuccessToast(`Please check your email! We've sent the login link to ${email}.`)
  setEmail("")
  closeModal()
}

const checkBookmarkExists = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  if (inputRef.current) inputRef.current.blur()
  const isBookmarkExist = bookmarks.some(bookmark => bookmark.url === url)
  if (isBookmarkExist) return showInfoToast("This website is already in your collection.", { action: {label: "Save", onClick: () => handleCreate()}, description: "Are you sure you want to save it again?", duration: 10000, icon: null })
  handleCreate()
}

add: async (url, userId) => {
  if (!url) return { data: "Please enter a valid URL.", success: false }
  if (!isValidUrl(url)) return { data: "Invalid URL format. Make sure the URL starts with https://.", success: false }
  try {
    set({ loading: true })
    const metadata = await getMetadata(url)
    if (!metadata) return { data: "Could not retrieve metadata. Please check if the URL is correct.", success: false }
    const { data, error } = await supabase
      .from("bookmarks")
      .insert({ title: metadata.title || metadata.domain, domain: metadata.domain, url: metadata.url, description: metadata.description, image: metadata.images[0], saved_by: userId, tags: [] })
      .select()
      .returns<Bookmark[]>()
    if (error) throw new Error(`Error saving bookmark: ${error.message}`)
    return { data, success: true }
  } catch (error) {
    return { data: "Failed to retrieve data for the entered URL.", success: false }
  } finally {
    set({ loading: false })
  }
},

if ((e.key === "," || e.key === "Enter") && trimmedInput.length && !newTags.includes(trimmedInput)) {
  e.preventDefault()
  setNewTags(prev => [ ...prev, trimmedInput ])
  setInputValue("")
}

if (e.key === "Backspace" && !inputValue.length && newTags.length && isKeyReleased) {
  e.preventDefault()

useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault()
      setOpen((open) => !open)
    }
  }
  document.addEventListener("keydown", down)
  return () => document.removeEventListener("keydown", down)
}, [])

<button onClick={() => setOrder(order === "asc" ? "desc" : "asc")} className={filterButtonStyle} disabled={loading}>
  { order === "asc" ? <DataTransferDown className="w-3 h-3" /> : <DataTransferUp className="w-3 h-3" /> }
  { order === "asc" ? "Oldest first" : "Newest first" }
</button>
<span className="text-xs text-zinc-700">|</span>
<button onClick={changeTimePeriod} className={filterButtonStyle} disabled={loading}>
  <CalendarRotate className="w-3 h-3" />
  { timePeriod === "all" ? "All time" : timePeriod === "month" ? "Last month" : "Last week" }
</button>