69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
import util from "../../util"
|
|
|
|
class PeopleCard extends Shadow {
|
|
constructor(person) {
|
|
super()
|
|
this.person = person
|
|
this.imgSrc = null
|
|
}
|
|
|
|
render() {
|
|
HStack(() => {
|
|
HStack(() => {
|
|
if (this.imgSrc && !this.imgSrc.includes("null")) {
|
|
img(this.imgSrc, "3em", "3em")
|
|
.borderRadius(100, pct)
|
|
}
|
|
})
|
|
.boxSizing("border-box")
|
|
.height(3, em)
|
|
.width(3, em)
|
|
.border("1px solid var(--accent)")
|
|
.borderRadius(100, pct)
|
|
.background("var(--darkaccent)")
|
|
|
|
VStack(() => {
|
|
p(this.person.first_name + " " + this.person.last_name)
|
|
.color("var(--headertext)")
|
|
.marginVertical(0, em)
|
|
})
|
|
.verticalAlign("center")
|
|
.horizontalAlign("left")
|
|
})
|
|
.width(100, pct)
|
|
.boxSizing("border-box")
|
|
.paddingHorizontal(1.75, em)
|
|
.gap(1, em)
|
|
}
|
|
|
|
connectedCallback() {
|
|
if(this.person.image_path) {
|
|
this.imgSrc = `${util.HOST}${this.person.image_path}`
|
|
}
|
|
}
|
|
|
|
convertDate(rawDate) {
|
|
const parsed = new Date(rawDate);
|
|
|
|
if (isNaN(parsed.getTime())) return rawDate;
|
|
|
|
const month = parsed.toLocaleString("en-US", { month: "long", timeZone: "UTC" });
|
|
const day = parsed.getUTCDate();
|
|
const year = parsed.getUTCFullYear();
|
|
|
|
const ordinal = (n) => {
|
|
const mod100 = n % 100;
|
|
if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
|
|
switch (n % 10) {
|
|
case 1: return `${n}st`;
|
|
case 2: return `${n}nd`;
|
|
case 3: return `${n}rd`;
|
|
default: return `${n}th`;
|
|
}
|
|
};
|
|
|
|
return `${month} ${ordinal(day)}, ${year}`;
|
|
}
|
|
}
|
|
|
|
register(PeopleCard) |