Fixes double bottom border in Integration List Item (#5026)

* Fixes double bottom border in Integration List Item

* Remove unused import

apps/web/pages/v2/apps/installed/[category].tsx

@@ -4,7 +4,6 @@ import z from "zod";
 import { AppSettings } from "@calcom/app-store/_components/AppSettings";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { InstalledAppVariants } from "@calcom/app-store/utils";
-import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { App } from "@calcom/types/App";
@@ -118,9 +117,7 @@ const IntegrationsList = ({ data }: IntegrationsListProps) => {
  />
  </div>
  }>
- <div className="border-t border-gray-200">
- <AppSettings slug={item.slug} />
- </div>
+ <AppSettings slug={item.slug} />
  </IntegrationListItem>
  ))}
  </List>

packages/app-store/_components/AppSettings.tsx

@@ -4,6 +4,10 @@ import { DynamicComponent } from "./DynamicComponent";
 
 export const AppSettings = (props: { slug: string }) => {
  return (
- <DynamicComponent<typeof AppSettingsComponentsMap> componentMap={AppSettingsComponentsMap} {...props} />
+ <DynamicComponent<typeof AppSettingsComponentsMap>
+ wrapperClassName="border-t border-gray-200"
+ componentMap={AppSettingsComponentsMap}
+ {...props}
+ />
  );
 };

packages/app-store/_components/DynamicComponent.tsx

@@ -1,9 +1,17 @@
-export function DynamicComponent<T extends Record<string, any>>(props: { componentMap: T; slug: string }) {
+export function DynamicComponent<T extends Record<string, any>>(props: {
+ componentMap: T;
+ slug: string;
+ wrapperClassName?: string;
+}) {
  const { componentMap, slug, ...rest } = props;
 
  if (!componentMap[slug]) return null;
 
  const Component = componentMap[slug];
 
- return <Component {...rest} />;
+ return (
+ <div className={props.wrapperClassName || ""}>
+ <Component {...rest} />
+ </div>
+ );
 }