mirror of
https://github.com/hanzoai/calendar.git
synced 2026-10-30 14:46:43 +00:00
abe92cd693
* feat: availability override classnames * feat: availability time picker styles * feat: calendar settings headers styles * feat: destination and connected calendars * feat: date override title,description,button * feat: selected calendars list * example styles * docs * chanegest * refactor: change import path to relative * fix: make all classnames optional * docs: time picker docs --------- Co-authored-by: Somay Chauhan <[email protected]>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Label } from "@calcom/ui/components/form";
|
|
|
|
import { cn } from "../src/lib/utils";
|
|
import type { DestinationCalendarProps } from "./DestinationCalendarSelector";
|
|
import { DestinationCalendarSelector } from "./DestinationCalendarSelector";
|
|
|
|
type DestinationHeaderClassnames = {
|
|
container?: string;
|
|
title?: string;
|
|
description?: string;
|
|
};
|
|
|
|
export type DestinationCalendarClassNames = {
|
|
container?: string;
|
|
header?: DestinationHeaderClassnames;
|
|
};
|
|
|
|
export const DestinationCalendarSettings = (
|
|
props: DestinationCalendarProps & { classNames?: string; classNamesObject?: DestinationCalendarClassNames }
|
|
) => {
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"border-subtle mb-6 mt-8 rounded-lg border",
|
|
props?.classNames || props?.classNamesObject?.container
|
|
)}>
|
|
<DestinationCalendarSettingsHeading classNames={props.classNamesObject?.header} />
|
|
<div className="border-t">
|
|
<div className="border-subtle flex w-full flex-col space-y-3 border-y-0 p-6">
|
|
<div>
|
|
<Label className="text-default mb-0 font-medium">{t("add_events_to")}</Label>
|
|
<DestinationCalendarSelector {...props} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DestinationCalendarSettingsHeading = ({ classNames }: { classNames?: DestinationHeaderClassnames }) => {
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<div className={cn("p-6", classNames?.container)}>
|
|
<h2 className={cn("text-emphasis mb-1 text-base font-bold leading-5 tracking-wide", classNames?.title)}>
|
|
{t("add_to_calendar")}
|
|
</h2>
|
|
<p className={cn("text-subtle text-sm leading-tight", classNames?.description)}>
|
|
{t("add_to_calendar_description")}
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|