booking form without action

alifhaider · Sep 13, 2024 · c27b43e · c27b43e
1 parent 093b9bc
commit c27b43e
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 153 deletions.
diff --git a/app/components/forms.tsx b/app/components/forms.tsx
@@ -62,33 +62,33 @@ export function Field({
 }
 
 export function TextareaField({
-	labelProps,
-	textareaProps,
-	errors,
-	className,
+  labelProps,
+  textareaProps,
+  errors,
+  className,
 }: {
-	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>
-	errors?: ListOfErrors
-	className?: string
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+  textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>
+  errors?: ListOfErrors
+  className?: string
 }) {
-	const fallbackId = useId()
-	const id = textareaProps.id ?? textareaProps.name ?? fallbackId
-	const errorId = errors?.length ? `${id}-error` : undefined
-	return (
-		<div className={className}>
-			<Label htmlFor={id} {...labelProps} />
-			<Textarea
-				id={id}
-				aria-invalid={errorId ? true : undefined}
-				aria-describedby={errorId}
-				{...textareaProps}
-			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
-				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
-			</div>
-		</div>
-	)
+  const fallbackId = useId()
+  const id = textareaProps.id ?? textareaProps.name ?? fallbackId
+  const errorId = errors?.length ? `${id}-error` : undefined
+  return (
+    <div className={className}>
+      <Label htmlFor={id} {...labelProps} />
+      <Textarea
+        id={id}
+        aria-invalid={errorId ? true : undefined}
+        aria-describedby={errorId}
+        {...textareaProps}
+      />
+      <div className="min-h-[32px] px-4 pb-3 pt-1">
+        {errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+      </div>
+    </div>
+  )
 }
 
 export function CheckboxField({

diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "~/lib/utils"
+import { cn } from '~/lib/utils'
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,25 +9,25 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className,
     )}
     {...props}
   />
 ))
-Card.displayName = "Card"
+Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
 ))
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -36,44 +36,44 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
+      'text-2xl font-semibold leading-none tracking-tight',
+      className,
     )}
     {...props}
   />
 ))
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ))
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
 ))
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = 'CardFooter'
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "~/lib/utils"
+import { cn } from '~/lib/utils'
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
         )}
         ref={ref}
         {...props}
       />
     )
-  }
+  },
 )
-Textarea.displayName = "Textarea"
+Textarea.displayName = 'Textarea'
 
 export { Textarea }
diff --git a/app/components/user-card.tsx b/app/components/user-card.tsx
@@ -51,7 +51,7 @@ export default function UserCard({ doctor, username }: UserCardProps) {
           <strong>Total schedules:</strong> {doctor?._count.schedules}
         </p>
         <Button asChild className="mx-4 mt-4">
-          <Link to={`/profile/${username}/book`}>Book appointment</Link>
+          <Link to={`/profile/${username}`}>Book appointment</Link>
         </Button>
       </div>
     </li>

diff --git a/app/routes/profile.$username._index.tsx b/app/routes/profile.$username._index.tsx
@@ -230,7 +230,7 @@ export default function User() {
       {isDoctor ? (
         <>
           <Spacer variant="md" />
-          <div className="flex flex-col md:flex-row gap-10">
+          <div className="flex flex-col gap-10 md:flex-row">
             <div>
               <h4 className="mb-4 text-3xl font-medium text-lime-500">
                 Availabilty Calendar
@@ -307,21 +307,18 @@ const Schedules = ({
   isOwner,
   username,
 }: ScheduleProps) => {
-
   return (
     <div className="flex-1">
       <h4 className="mb-4 text-3xl font-medium text-lime-500">Schedules</h4>
       <Spacer variant="sm" />
       {schedules && schedules?.length > 0 && (
-
-      <div className='relative flex items-center'>
-        <span className='w-full border h-0.5'></span>
-        <h5 className="text-sm font-medium text-nowrap mx-1 text-secondary-foreground">
-        {format(schedules[0].date ?? new Date(), 'dd MMMM, yyyy')}
-      </h5>
-        <span className='w-full border h-0.5'></span>
-
-      </div>
+        <div className="relative flex items-center">
+          <span className="h-0.5 w-full border"></span>
+          <h5 className="mx-1 text-nowrap text-sm font-medium text-secondary-foreground">
+            {format(schedules[0].date ?? new Date(), 'dd MMMM, yyyy')}
+          </h5>
+          <span className="h-0.5 w-full border"></span>
+        </div>
       )}
       <Spacer variant="sm" />
 
@@ -339,8 +336,7 @@ const Schedules = ({
                     <h6 className="flex items-end text-2xl font-bold leading-none">
                       {schedule.location.name}{' '}
                       <span className="text-xs font-normal">
-                        /
-                        {formatTime(schedule.startTime)} - {" "}
+                        /{formatTime(schedule.startTime)} -{' '}
                         {formatTime(schedule.endTime)}
                       </span>
                     </h6>