mirror of
https://github.com/hanzoai/calendar.git
synced 2026-10-30 14:46:43 +00:00
1fb778ae78
* ui playground * add types to ui * push avatar ignore ts and eslint errors * feat: V3 UI avatar (#18997) * avatar playground * add overflow-hidden back for loading indicator * update lock * feat: v3/badge (#18999) * badge intro * fix text on small badge * add dark mode warning * feat: v3/button (#19014) * TOC * wip buttons * shadows * secondary * semantic colours * minimal buttons * update disabled states * checkbox * dropdown v3 * load icons * fix design sections * fix icon gap * fix * remove client component from rsc * use peer as avatar * gif * fix button gap - dropdown iocn * support start icon in dropdowns * add alert demo + v3 component + darken semantic text * base inputs and text field * wip input * input field addon/suffix * toast page * wip select * match designs for input and select rounded * fix * fix select isloading transform * fix multi icons transition rotation * fix group heading * range slider demo + range slider * range slider popover design * v3 dialog * fix slider thumb size * wrap in suspense for useSearchParam difference in next14+ * base of tabs + horizontal tabs * fix select sizing to match input 36px * fix dark mode hover on button * target domState class for light/dark so we work on portal elements * fix default bg on popover * lightmode toasts + eleveation token * empty screen * intro to split button concept * mass colour updates * intro to themes * remove i18n from label with name * bouncy buttons * feat: small select * nav item dumb component * full demo * settings demo * fix tabs * fix mt * fix dropdown feedback from loom * alert fixes mentioned in loom * push font-cal * move to fumadocs * fix avatar * colors table * add typeography * icon + spacing guide * add border radius and shadow tables * fix colours and border radius * remove prose undline via fumas fork * fix icon buttons sizes * button group component * fix horizontal tabs * tab fixes * switches * pagination component * show toasts components raw * sync with airtable * add use client * 10px on input again * 10px in select also * fix input height * fix files merge * fix loading state for icon buttons * fix button fab * Enable addon to now overflow to next line in DS * use cal font for dialog text * add avatar square variant * fix select padding and menu size * fix type errors * fix type errors * add switch small size and fix type errors * fix ref types on input * update web styles * remove addonFilled to fix type errors * push dialog fixes * fix checkbox display * remove prose from alert examples * remove prose from all our component examples * badge rounded-lg on lg size * update colors * force w/h on icon buttons instead of inheriting * remove border-focus * remove border-focus from tailwind config * update tokens to match new colours * add new border subtle tokens and add to toasts * fix lg button padding * fix and drastically improve rtl rests * multi select use badges * use badge design for select pills * fix avatar alignment * fix tests and remove redudant ones * fix tests and remove redudant ones * update atoms globals css * extract tokens.css * extract app.css * force flex for atoms * add @calcom/ui/css * revert ui playground styles abstraction * fix input focus states * fix focus states for buttons * feat: v3/app work (#19233) * globals.css for app + event types listing search * few app wide NITS * fix select foucs within styling * fix formbuilder switch styles * fix disabled state of nested inputs * workflow fixes * webhook form fixes * i18n on tabs info * booking filters + tab * fix filters spacing * make first item so we get correct border radius if not default * round radio group in create event types + make button small * profile page * update editor br * button nits in existing places in the app * fix timezone select and multilist in guest form * fix text area on public booking page * size small event types create * margin on routing filter * filters improvments * routing insights fixes * fix date filter range * ooo fixes * fix teams/members bulk actions * create team UI * i18n in useTabs instead of in tab component now * Add event type setup border to availability * fix bulk actions on org members table * onboarding fixes * fix input types with ref stripe comparision * i18n fixes for platform * update globals of atoms * fix form builder firstname/lastname switch + correct footer useage * fix select * Revert "add @calcom/ui/css" This reverts commit 0dd8f9012907a278cfede4a98f289cb0744c9244. * revert tokens css * Revert "extract app.css" This reverts commit 10b998604816ad3310c24b36a02a638dabc5be24. * linear nits * workflow dropdown * fix page theme heading sizes to match cards * fix stepper for team creation * adjust margin to FilterSearchField * fix ooo icon * fix booker and dark mode due to darkgray 50 * more dark mode fixes * add size prop --------- Co-authored-by: Eunjae Lee <[email protected]> Co-authored-by: Morgan Vernay <[email protected]> * update package name * update package json lost in merge * update package json lost in merge * re-genrate source * fix imports * imports * fix merge issues and imports * restore globals css * add source to git ignore * remove old source files --------- Co-authored-by: Eunjae Lee <[email protected]> Co-authored-by: Morgan Vernay <[email protected]>
205 lines
5.1 KiB
TypeScript
205 lines
5.1 KiB
TypeScript
"use client";
|
|
|
|
import { RenderComponentWithSnippet } from "@/app/components/render";
|
|
import { useState } from "react";
|
|
|
|
import { NavigationItem } from "@calcom/ui";
|
|
|
|
export const SidebarExample: React.FC = () => {
|
|
const [isDeelExpanded, setIsDeelExpanded] = useState(true);
|
|
|
|
return (
|
|
<RenderComponentWithSnippet>
|
|
<div className="bg-muted border-muted flex w-60 flex-col border p-3">
|
|
<NavigationItem
|
|
item={{
|
|
name: "Event types",
|
|
href: "#event-types",
|
|
icon: "link",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Bookings",
|
|
href: "#bookings",
|
|
icon: "users",
|
|
isCurrent: true,
|
|
isExpanded: true,
|
|
child: [
|
|
{ name: "Label", href: "#label-1" },
|
|
{ name: "Label", href: "#label-2" },
|
|
{ name: "Label", href: "#label-3" },
|
|
{ name: "Label", href: "#label-4" },
|
|
],
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Insights",
|
|
href: "#insights",
|
|
icon: "chart-line",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Routing forms",
|
|
href: "#routing-forms",
|
|
icon: "shuffle",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Workflows",
|
|
href: "#workflows",
|
|
icon: "zap",
|
|
}}
|
|
/>
|
|
<div className="text-subtle mt-4 px-2 text-sm">Manage</div>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Members",
|
|
href: "#members",
|
|
icon: "users",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Apps",
|
|
href: "#apps",
|
|
icon: "grid-3x3",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Availability",
|
|
href: "#availability",
|
|
icon: "clock",
|
|
}}
|
|
/>
|
|
<div className="mt-auto" />
|
|
<NavigationItem
|
|
item={{
|
|
name: "Help",
|
|
href: "#help",
|
|
icon: "circle-help",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Settings",
|
|
href: "#settings",
|
|
icon: "settings",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="bg-muted border-muted flex w-60 flex-col border p-3">
|
|
<NavigationItem
|
|
item={{
|
|
name: "Back",
|
|
href: "#back",
|
|
icon: "chevron-left",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Appearance",
|
|
href: "#appearance",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Out of office",
|
|
href: "#out-of-office",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Security",
|
|
icon: "shield",
|
|
isExpanded: true,
|
|
child: [
|
|
{
|
|
name: "Password",
|
|
href: "#password",
|
|
},
|
|
{
|
|
name: "Impersonation",
|
|
href: "#impersonation",
|
|
},
|
|
{
|
|
name: "Two factor auth",
|
|
href: "#2fa",
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
|
|
<NavigationItem
|
|
item={{
|
|
name: "Billing",
|
|
icon: "credit-card",
|
|
isExpanded: true,
|
|
child: [
|
|
{
|
|
name: "Manage billing",
|
|
href: "#manage-billing",
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
|
|
<NavigationItem
|
|
item={{
|
|
name: "Developer",
|
|
icon: "code",
|
|
isExpanded: true,
|
|
child: [
|
|
{
|
|
name: "Webhooks",
|
|
href: "#webhooks",
|
|
},
|
|
{
|
|
name: "API Keys",
|
|
href: "#api-keys",
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
|
|
<NavigationItem
|
|
item={{
|
|
name: "Teams",
|
|
icon: "users",
|
|
}}
|
|
/>
|
|
<NavigationItem
|
|
item={{
|
|
name: "Deel",
|
|
icon: isDeelExpanded ? "chevron-down" : "chevron-right",
|
|
isExpanded: isDeelExpanded,
|
|
onToggle: () => setIsDeelExpanded(!isDeelExpanded),
|
|
child: [
|
|
{ name: "Profile", href: "#profile" },
|
|
{ name: "Members", href: "#members" },
|
|
{ name: "Event Types", href: "#event-types" },
|
|
{ name: "Appearance", href: "#appearance" },
|
|
{ name: "Billing", href: "#billing" },
|
|
{ name: "Booking Limits", href: "#booking-limits" },
|
|
{ name: "Attributes", href: "#attributes" },
|
|
{ name: "Segments", href: "#segments", isCurrent: true },
|
|
],
|
|
}}
|
|
/>
|
|
|
|
<NavigationItem
|
|
item={{
|
|
name: "Add team",
|
|
href: "#add-team",
|
|
icon: "plus",
|
|
}}
|
|
/>
|
|
</div>
|
|
</RenderComponentWithSnippet>
|
|
);
|
|
};
|