"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const antd_1 = require("antd");
const image_1 = __importDefault(require("components/landing/image"));
const A_1 = __importDefault(require("components/misc/A"));
const icon_1 = require("@cocalc/frontend/components/icon");
const antd_2 = require("antd");
const use_customize_1 = __importDefault(require("lib/use-customize"));
const config_1 = require("lib/config");
function IndexList({ title, description, dataSource }) {
    const customize = (0, use_customize_1.default)();
    const { shareServer, landingPages } = customize;
    const filtedDataSource = (0, react_1.useMemo)(() => {
        return dataSource.filter((item) => {
            if (item.shareServer && !shareServer)
                return false;
            if (item.landingPages && !landingPages)
                return false;
            if (item.hide?.(customize))
                return false;
            return true;
        });
    }, [shareServer, landingPages, dataSource]);
    return ((0, jsx_runtime_1.jsx)(antd_2.Layout.Content, { style: {
            backgroundColor: "white",
        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                maxWidth: config_1.MAX_WIDTH,
                margin: "15px auto",
                padding: "15px",
                backgroundColor: "white",
            }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { textAlign: "center", fontSize: "32pt", color: "#444" }, children: title }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: "13pt" }, children: description }), (0, jsx_runtime_1.jsx)(DataList, { dataSource: filtedDataSource })] }) }));
}
exports.default = IndexList;
function DataList({ dataSource }) {
    return ((0, jsx_runtime_1.jsx)(antd_1.List, { itemLayout: "vertical", size: "large", dataSource: dataSource, renderItem: (item) => {
            const icon = ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: "2.5px" }, children: typeof item.logo == "string" ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { name: item.logo, style: { fontSize: "75px" } })) : ((0, jsx_runtime_1.jsx)(image_1.default, { src: item.logo, width: 75, height: 75, alt: "Logo" })) }));
            const extra = item.image && ((0, jsx_runtime_1.jsx)("div", { style: { width: item.imageWidth ?? "275px" }, children: (0, jsx_runtime_1.jsx)(A_1.default, { href: item.link, children: (0, jsx_runtime_1.jsx)(image_1.default, { src: item.image, alt: `Screenshot illustrating ${item.title}` }) }) }));
            return ((0, jsx_runtime_1.jsx)(antd_1.List.Item, { extra: extra, children: (0, jsx_runtime_1.jsx)(antd_1.List.Item.Meta, { avatar: item.logo && ((0, jsx_runtime_1.jsx)(A_1.default, { href: item.link, alt: item.title + " logo ", children: (0, jsx_runtime_1.jsx)(antd_1.Avatar, { style: { marginTop: "20px" }, alt: item.title + " logo ", size: 80, shape: "square", icon: icon }) })), title: (0, jsx_runtime_1.jsx)(A_1.default, { href: item.link, style: { fontSize: "16pt" }, children: item.title }), description: (0, jsx_runtime_1.jsx)("span", { style: { color: "#555", fontSize: "12pt" }, children: item.description }) }) }, item.link));
        } }));
}
//# sourceMappingURL=index-list.js.map