@skhemata/skhemata-crowdfunding-campaign
Version:
Skhemata Crowdfunding Campaign Web Component. This web component provides crowdfunding campaign functionality (reward/donation based) for a website.
66 lines (65 loc) • 2.46 kB
JavaScript
import { __decorate } from "tslib";
/* eslint-disable lit/binding-positions */
/* eslint-disable lit-a11y/anchor-is-valid */
/* eslint-disable lit-a11y/click-events-have-key-events */
/* eslint-disable import/no-extraneous-dependencies */
import { html, css, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { Bulma } from '@skhemata/skhemata-css';
import { GlobalStyles } from '../styles/global';
export class CampaignCreator extends LitElement {
// async firstUpdated() {}
render() {
// https://origin.thrinacia.com/api/image/campaign_profile
// https://i.pravatar.cc/300
var _a, _b, _c;
// "${this.campaign?.managers[0]?.person_files[0]?.path_external
// ? `${this.apiUrl}/image/campaign_profile/${this.campaign?.managers[0].person_files[0].path_external}`
// : 'https://via.placeholder.com/300'}"
console.log(this.apiUrl);
return html `
<div
class="columns campaign-creator-container has-background-grey-lighter"
>
<div
class="column is-one-quarter campaign-creator-image-box is-flex is-flex-direction-column is-justify-content-center is-align-items-center"
>
<figure class="image is-96x96">
<img
class="is-rounded"
alt="campaign creator avatar"
src="https://via.placeholder.com/300"
/>
</figure>
<h4 class="titleFont is-size-7">
${(_a = this.campaign) === null || _a === void 0 ? void 0 : _a.managers[0].first_name}
${(_b = this.campaign) === null || _b === void 0 ? void 0 : _b.managers[0].last_name}
</h4>
</div>
<div class="column campaign-creator-info-box">
<h3 class="titleFont is-size-6 mb-2">Campaign Creator</h3>
<p class="is-size-7">${(_c = this.campaign) === null || _c === void 0 ? void 0 : _c.managers[0].bio}</p>
</div>
</div>
`;
}
}
CampaignCreator.styles = [
Bulma,
GlobalStyles,
css `
.campaign-creator-container {
border-radius: 9px;
}
.campaign-creator-image-box {
gap: 4px;
}
`,
];
__decorate([
property({ type: String, attribute: 'api_url' })
], CampaignCreator.prototype, "apiUrl", void 0);
__decorate([
property({ type: Object })
], CampaignCreator.prototype, "campaign", void 0);
//# sourceMappingURL=CampaignCreator.js.map