123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
// eslint-disable-next-line no-restricted-imports
|
|
import shuffle from "lodash/shuffle";
|
|
import { useState, memo } from "react";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { localStorage } from "@calcom/lib/webstorage";
|
|
import { Card } from "@calcom/ui";
|
|
|
|
export const tips = [
|
|
{
|
|
id: 4,
|
|
thumbnailUrl: "https://assets.blsmedia.de/cal/webai.jpg",
|
|
mediaLink: "https://bls.media/webai",
|
|
title: "BLS webai",
|
|
description: "Deine eigene individuelle KI",
|
|
href: "https://bls.media/webai",
|
|
},
|
|
{
|
|
id: 3,
|
|
thumbnailUrl: "https://assets.blsmedia.de/cal/bot.jpg",
|
|
mediaLink: "https://bls.media/bot",
|
|
title: "BLS bot",
|
|
description: "Sag Tschüss zu unpersönlichen Kontaktformularen!",
|
|
href: "https://bls.media/bot",
|
|
},
|
|
{
|
|
id: 2,
|
|
thumbnailUrl: "https://assets.blsmedia.de/cal/teams.jpg",
|
|
mediaLink: "https://bls.media/cal#teams",
|
|
title: "Besser im Team",
|
|
description: "Volles Potential von BLS cal",
|
|
href: "https://bls.media/cal#teams",
|
|
},
|
|
{
|
|
id: 1,
|
|
thumbnailUrl: "https://assets.blsmedia.de/cal/media.jpg",
|
|
mediaLink: "https://bls.media",
|
|
title: "BLS media",
|
|
description: "Lerne alle unsere Tools kennen",
|
|
href: "https://bls.media",
|
|
},
|
|
];
|
|
|
|
const reversedTips = shuffle(tips).slice(0).reverse();
|
|
|
|
function Tips() {
|
|
const { t } = useLocale();
|
|
|
|
const [list, setList] = useState<typeof tips>(() => {
|
|
if (typeof window === "undefined") {
|
|
return reversedTips;
|
|
}
|
|
try {
|
|
const removedTipsString = localStorage.getItem("removedTipsIds");
|
|
if (removedTipsString !== null) {
|
|
const removedTipsIds = removedTipsString.split(",").map((id) => parseInt(id, 10));
|
|
const filteredTips = reversedTips.filter((tip) => removedTipsIds.indexOf(tip.id) === -1);
|
|
return filteredTips;
|
|
} else {
|
|
return reversedTips;
|
|
}
|
|
} catch {
|
|
return reversedTips;
|
|
}
|
|
});
|
|
|
|
const handleRemoveItem = (id: number) => {
|
|
setList((currentItems) => {
|
|
const items = localStorage.getItem("removedTipsIds") || "";
|
|
const itemToRemoveIndex = currentItems.findIndex((item) => item.id === id);
|
|
|
|
localStorage.setItem(
|
|
"removedTipsIds",
|
|
`${currentItems[itemToRemoveIndex].id.toString()}${items.length > 0 ? `,${items.split(",")}` : ""}`
|
|
);
|
|
currentItems.splice(itemToRemoveIndex, 1);
|
|
return [...currentItems];
|
|
});
|
|
};
|
|
|
|
const baseOriginalList = list.slice(0).reverse();
|
|
return (
|
|
<div
|
|
className="hidden pb-4 pt-8 lg:grid"
|
|
/* ref={animationRef} */
|
|
style={{
|
|
gridTemplateColumns: "1fr",
|
|
}}>
|
|
{list.map((tip) => {
|
|
return (
|
|
<div
|
|
className="relative"
|
|
style={{
|
|
gridRowStart: 1,
|
|
gridColumnStart: 1,
|
|
}}
|
|
key={tip.id}>
|
|
<div
|
|
className="relative"
|
|
style={{
|
|
transform: `scale(${1 - baseOriginalList.indexOf(tip) / 20})`,
|
|
top: -baseOriginalList.indexOf(tip) * 10,
|
|
opacity: `${1 - baseOriginalList.indexOf(tip) / 7}`,
|
|
}}>
|
|
<Card
|
|
variant="SidebarCard"
|
|
thumbnailUrl={tip.thumbnailUrl}
|
|
mediaLink={tip.mediaLink}
|
|
title={tip.title}
|
|
description={tip.description}
|
|
learnMore={{ href: tip.href, text: t("learn_more") }}
|
|
actionButton={{ onClick: () => handleRemoveItem(tip.id), child: t("dismiss") }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(Tips);
|