Davstack UI

'use client';
 
import { useRouter } from 'next/navigation';
import {
	Button,
	ButtonProps,
	dialog,
	Field,
	Form,
	PlusCircleIcon,
	toast,
} from '@ui';
import { z } from 'zod';
 
import { api } from '@ream/api/react';
 
export const createRitualFormSchema = z.object({
	title: z.string().min(1, 'Name is required'),
	description: z.string().optional(),
	frequency: FrequencySchema.optional(),
	timeOfDay: z.string().optional(),
});
 
export interface CreateRitualFormProps {}
 
export function CreateRitualForm(props: CreateRitualFormProps) {
	const {} = props;
 
	const createRitualMutation = api.ritual.createRitual.useMutation();
 
	return (
		<>
			<Form.Root
				schema={createRitualFormSchema}
				onSubmit={async (d) => createRitualMutation?.mutateAsync(d)}
				mode="onSubmit"
			>
				<Form.Header>
					<Form.Title>Create ritual</Form.Title>
				</Form.Header>
				<Field.Text
					name="title"
					placeholder="morning ritual"
					inputProps={{
						autoFocus: true,
					}}
				/>
				<Field.Textarea
					name="description"
					optionalIndicator
					withVoiceRecognition
				/>
 
				<Field.Time
					name="timeOfDay"
					orientation="horizontal"
					slotClasses={{
						root: 'mt-2',
					}}
					label="Notification Time"
					helpMessage="We will remind you at this time, and order your rituals based on this time."
				/>
 
				<Field.Select
					name="frequency"
					options={[
						{ label: 'daily', value: 'DAILY' },
						{ label: 'weekly', value: 'WEEKLY' },
						{ label: 'monthly', value: 'MONTHLY' },
						{ label: 'yearly', value: 'YEARLY' },
					]}
				/>
 
				<Form.SubmitButton className="ml-auto w-auto">create</Form.SubmitButton>
			</Form.Root>
		</>
	);
}
 
export const openCreateRitualModal = () => {
	dialog.open(<CreateRitualForm />);
};
 
export type CreateRitualButtonProps = ButtonProps & {};
 
export function CreateRitualButton(props: CreateRitualButtonProps) {
	const { ...buttonProps } = props;
	return (
		<Button variant="outline" onClick={openCreateRitualModal} {...buttonProps}>
			<PlusCircleIcon className="h-4 w-4 stroke-fg-muted" />
			create ritual
		</Button>
	);
}