profile-pane
Version:
A SolidOS compatible pane to display a personal profile page
51 lines • 4.2 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SocialCard = void 0;
var lit_html_1 = require("lit-html");
var baseStyles_1 = require("./baseStyles");
var style_map_js_1 = require("lit-html/directives/style-map.js");
var baseStyles_2 = require("./baseStyles");
var styles = {
image: (0, style_map_js_1.styleMap)((0, baseStyles_1.fullWidth)()),
intro: (0, style_map_js_1.styleMap)(__assign(__assign({}, (0, baseStyles_1.textGray)()), (0, baseStyles_1.textCenter)())),
card: (0, style_map_js_1.styleMap)((0, baseStyles_2.card)()),
info: (0, style_map_js_1.styleMap)(__assign(__assign({}, (0, baseStyles_1.paddingSmall)()), (0, baseStyles_1.textCenter)())),
tools: (0, style_map_js_1.styleMap)(__assign(__assign({}, (0, baseStyles_1.paddingSmall)()), (0, baseStyles_1.textRight)())),
};
var SocialCard = function (profileBasics, SocialData) {
var accounts = SocialData.accounts;
var nameStyle = (0, style_map_js_1.styleMap)(__assign(__assign({}, (0, baseStyles_1.heading)()), {
// "text-decoration": "underline",
color: profileBasics.highlightColor }));
if (accounts.length) {
return (0, lit_html_1.html)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <div>\n <div data-testid=\"social-media\" style=\"", "\">\n <div style=", ">\n <h3 style=", ">Follow me on</h3>\n\n <div style=", ">", "</div>\n </div>\n </div>\n </div>\n "], ["\n <div>\n <div data-testid=\"social-media\" style=\"", "\">\n <div style=", ">\n <h3 style=", ">Follow me on</h3>\n\n <div style=", ">", "</div>\n </div>\n </div>\n </div>\n "])), styles.card, styles.info + "margin: auto;", nameStyle, styles.info, renderAccounts(accounts));
}
return (0, lit_html_1.html)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
};
exports.SocialCard = SocialCard;
function renderAccount(account) {
return account.homepage && account.name && account.icon
? (0, lit_html_1.html)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["<div class=\"textButton-0-1-3\" style=\"margin-top: 0.3em; margin-bottom: 0.3em;\">\n\n <a href=\"", "\" style=\"text-decoration: none;\" target=\"social\"> \n <img style=\"width: 2em; height: 2em; margin: 1em; vertical-align:middle;\" src=\"", "\" alt=\"", "\"> \n\n <span style=\"font-size: 1.2rem;\">", "</span> \n </a>\n </div> "], ["<div class=\"textButton-0-1-3\" style=\"margin-top: 0.3em; margin-bottom: 0.3em;\">\n\n <a href=\"", "\" style=\"text-decoration: none;\" target=\"social\"> \n <img style=\"width: 2em; height: 2em; margin: 1em; vertical-align:middle;\" src=\"", "\" alt=\"", "\"> \n\n <span style=\"font-size: 1.2rem;\">", "</span> \n </a>\n </div> "])), account.homepage, account.icon, account.name, account.name) : (0, lit_html_1.html)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
}
function renderAccounts(accounts) {
if (accounts.length > 0)
return (0, lit_html_1.html)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["", "", ""], ["", "", ""])), renderAccount(accounts[0]), accounts.length > 1 ? renderAccounts(accounts.slice(1)) : (0, lit_html_1.html)(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""]))));
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
// ends
//# sourceMappingURL=SocialCard.js.map