nimone

import { createContext, useContext, useRef, useEffect, useState } from "react"
import { ChevronDown } from "react-feather"

const AccordianContext = createContext()

export default function Accordian({ children, value, onChange, ...props }) {
  const [selected, setSelected] = useState(value)

  useEffect(() => {
    onChange?.(selected)

nimone

import { useState } from "react"
import Modal from "./components/Modal"
import Trash from "./icons/Trash"

export default function App() {
  const [open, setOpen] = useState(false)
  return (
    <main className="App">
      <button className="btn btn-danger" onClick={() => setOpen(true)}>
        <Trash /> Delete

nimone

import { GitHub, Twitter, Facebook, Instagram, Youtube } from "react-feather"
import IconButton from "./components/IconButton"

export default function App() {
  return (
    <main className="App gap-4">
      <h1 className="text-gray-700 font-medium">Checkout Our Socials</h1>
      <IconButton text="Github">
        <GitHub size={20} />
      </IconButton>

nimone

import { DependencyList, useCallback, useRef } from "react"

export default function useIntersectionObserver<T extends HTMLElement>(
  callback: () => void,
  deps: DependencyList
) {
  const observer = useRef<IntersectionObserver | null>(null)

  const ref = useCallback(
    (node: T) => {

nimone

import { useState } from "react"
import Radio, { RadioGroup } from "./components/Radio"
import { BadgePercent, Sparkle, Gem, Crown, ArrowRight } from "lucide-react"

export default function App() {
  const [plan, setPlan] = useState("")
  return (
    <main className="min-h-screen flex flex-col items-center justify-center">
      <h2 className="text-2xl font-bold tracking-tight">Choose Your Plan</h2>
      <hr className="my-3 w-56" />

nimone

import { MoreVertical, ChevronLast, ChevronFirst } from "lucide-react"
import { useContext, createContext, useState } from "react"

const SidebarContext = createContext()

export default function Sidebar({ children }) {
  const [expanded, setExpanded] = useState(true)
  
  return (
    <aside className="h-screen">

nimone

import { useState, useEffect } from "react"
import { ChevronLeft, ChevronRight } from "react-feather"

export default function Carousel({
  children: slides,
  autoSlide = false,
  autoSlideInterval = 3000,
}) {
  const [curr, setCurr] = useState(0)