create separate types for each component prop

packages/atoms/availabilitylist/Availability.tsx

@@ -14,14 +14,7 @@ import { Fragment } from "react";
 
 import { availabilityAsString } from "@calcom/lib/availability";
 
-export function Availability({
-  schedule,
-  isDeletable,
-  displayOptions,
-  updateDefault,
-  duplicateFunction,
-  deleteFunction,
-}: {
+type AvailabilityProps = {
   schedule: Schedule;
   isDeletable: boolean;
   updateDefault: ({ scheduleId, isDefault }: { scheduleId: number; isDefault: boolean }) => void;
@@ -31,7 +24,16 @@ export function Availability({
     timeZone?: string;
     hour12?: boolean;
   };
-}) {
+};
+
+export function Availability({
+  schedule,
+  isDeletable,
+  displayOptions,
+  updateDefault,
+  duplicateFunction,
+  deleteFunction,
+}: AvailabilityProps) {
   const { toast } = useToast();
 
   return (

packages/atoms/availabilitylist/AvailabilityList.tsx

@@ -23,13 +23,7 @@ export type Schedule = {
   timezone?: string;
 };
 
-export function AvailabilityList({
-  schedules,
-  onCreateMutation,
-  updateMutation,
-  duplicateMutation,
-  deleteMutation,
-}: {
+type AvailabilityListProps = {
   schedules: Schedule[] | [];
   onCreateMutation: (values: {
     onSucess: (schedule: Schedule) => void;
@@ -38,7 +32,15 @@ export function AvailabilityList({
   updateMutation: ({ scheduleId, isDefault }: { scheduleId: number; isDefault: boolean }) => void;
   duplicateMutation: ({ scheduleId }: { scheduleId: number }) => void;
   deleteMutation: ({ scheduleId }: { scheduleId: number }) => void;
-}) {
+};
+
+export function AvailabilityList({
+  schedules,
+  onCreateMutation,
+  updateMutation,
+  duplicateMutation,
+  deleteMutation,
+}: AvailabilityListProps) {
   if (schedules.length === 0) {
     return (
       <div className="flex justify-center">

packages/atoms/availabilitylist/EmptyScreen.tsx

@@ -6,6 +6,18 @@ import React from "react";
 import { classNames } from "@calcom/lib";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 
+type EmptyScreenProps = {
+  Icon?: SVGComponent | IconType;
+  avatar?: React.ReactElement;
+  headline: string | React.ReactElement;
+  description?: string | React.ReactElement;
+  buttonText?: string;
+  buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  buttonRaw?: ReactNode; // Used incase you want to provide your own button.
+  border?: boolean;
+  dashedBorder?: boolean;
+};
+
 export function EmptyScreen({
   Icon,
   avatar,
@@ -17,17 +29,7 @@ export function EmptyScreen({
   border = true,
   dashedBorder = true,
   className,
-}: {
-  Icon?: SVGComponent | IconType;
-  avatar?: React.ReactElement;
-  headline: string | React.ReactElement;
-  description?: string | React.ReactElement;
-  buttonText?: string;
-  buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  buttonRaw?: ReactNode; // Used incase you want to provide your own button.
-  border?: boolean;
-  dashedBorder?: boolean;
-} & React.HTMLAttributes<HTMLDivElement>) {
+}: EmptyScreenProps & React.HTMLAttributes<HTMLDivElement>) {
   return (
     <>
       <div

packages/atoms/availabilitylist/NewScheduleButton.tsx

@@ -21,16 +21,15 @@ import type { Schedule } from ".prisma/client";
 // then passed in as a prop
 // TODO: translations can be taken care of later
 
-export function NewScheduleButton({
-  name = "new-schedule",
-  createMutation,
-}: {
+type NewScheduleButtonProps = {
   name?: string;
   createMutation: (values: {
     onSucess: (schedule: Schedule) => void;
     onError: (err: HttpError) => void;
   }) => void;
-}) {
+};
+
+export function NewScheduleButton({ name = "new-schedule", createMutation }: NewScheduleButtonProps) {
   const form = useForm<{
     name: string;
   }>();