Newgentleduck/ui — Charts, Sidebar blocks, and moreCharts & Sidebar blocksSee what's new
Building Blocks for Modern Apps
Pre-built, composable UI blocks you can drop into any React project. Ship complete features in minutes.
import { atom } from 'jotai'
import type { CalendarEvent, CalendarView, FilterMode } from './calendar-1.types'
import { MOCK_EVENTS } from './calendar-data'
// --- Core state atoms ---
export const eventsAtom = atom<CalendarEvent[]>(MOCK_EVENTS)
export const viewedDateAtom = atom<Date>(new Date(2026, 2, 10))
export const calendarViewAtom = atom<CalendarView>('month')
export const filterModeAtom = atom<FilterMode>('all')
// --- UI state atoms ---
export const addEventDateAtom = atom<string | null>(null)
export const editingEventAtom = atom<CalendarEvent | null>(null)
export const isAddEventOpenAtom = atom<boolean>(false)
export const overflowDayAtom = atom<string | null>(null)
export const commandOpenAtom = atom<boolean>(false)
// --- Derived atoms ---
export const filteredEventsAtom = atom<CalendarEvent[]>((get) => {
const events = get(eventsAtom)
const filter = get(filterModeAtom)
if (filter === 'shared') return events.filter((e) => e.starred)
return events
})
export const showEmptyStateAtom = atom<boolean>((get) => {
const filter = get(filterModeAtom)
return filter === 'public' || filter === 'archived'
})
calendar-block-1