5dbb60dc85
* Adds initial MDX implementation for App Store pages * Adds endpoint to serve app store static files * Replaces zoom icon with dynamic-served one * Fixes zoom icon * Makes Slider reusable * Adds gray-matter for MDX * Adds zoom screenshots * Update yarn.lock * Slider improvements * WIP * Update TrendingAppsSlider.tsx * WIP * Adds MS teams screenshots * Adds stripe screenshots * Cleanup * Update index.ts * WIP * Cleanup * Cleanup * Adds jitsi screenshot * Adds Google meet screenshots * Adds office 365 calendar screenshots * Adds google calendar screenshots Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
39 lines
915 B
TypeScript
39 lines
915 B
TypeScript
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import type { App } from "@calcom/types/App";
|
|
|
|
import AppCard from "./AppCard";
|
|
import Slider from "./Slider";
|
|
|
|
const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<Slider<T>
|
|
className="mb-16"
|
|
title={t("trending_apps")}
|
|
items={items.filter((app) => !!app.trending)}
|
|
itemKey={(app) => app.name}
|
|
options={{
|
|
perView: 3,
|
|
breakpoints: {
|
|
768 /* and below */: {
|
|
perView: 1,
|
|
},
|
|
},
|
|
}}
|
|
renderItem={(app) => (
|
|
<AppCard
|
|
key={app.name}
|
|
name={app.name}
|
|
slug={app.slug}
|
|
description={app.description}
|
|
logo={app.logo}
|
|
rating={app.rating}
|
|
reviews={app.reviews}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default TrendingAppsSlider;
|