mirror of
https://github.com/web3privacy/web
synced 2024-10-15 18:26:27 +02:00
129 lines
4 KiB
Text
129 lines
4 KiB
Text
---
|
|
const { people, team } = Astro.props;
|
|
// Dummy data for now:
|
|
let filteredPeople = [
|
|
{
|
|
id: "guy-zyskind",
|
|
name: "Guy Zyskind",
|
|
caption:
|
|
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
|
|
country: "is",
|
|
refs: {
|
|
twitter: "GuyZys",
|
|
},
|
|
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
|
|
thumbs: {
|
|
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
|
|
"128":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
|
|
"400":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
|
|
},
|
|
},
|
|
{
|
|
id: "guy-zyskind",
|
|
name: "Guy Zyskind",
|
|
caption:
|
|
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
|
|
country: "is",
|
|
refs: {
|
|
twitter: "GuyZys",
|
|
},
|
|
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
|
|
thumbs: {
|
|
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
|
|
"128":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
|
|
"400":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
|
|
},
|
|
},
|
|
{
|
|
id: "guy-zyskind",
|
|
name: "Guy Zyskind",
|
|
caption:
|
|
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
|
|
country: "is",
|
|
refs: {
|
|
twitter: "GuyZys",
|
|
},
|
|
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
|
|
thumbs: {
|
|
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
|
|
"128":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
|
|
"400":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
|
|
},
|
|
},
|
|
{
|
|
id: "guy-zyskind",
|
|
name: "Guy Zyskind",
|
|
caption:
|
|
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
|
|
country: "is",
|
|
refs: {
|
|
twitter: "GuyZys",
|
|
},
|
|
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
|
|
thumbs: {
|
|
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
|
|
"128":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
|
|
"400":
|
|
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
|
|
},
|
|
},
|
|
];
|
|
|
|
// NOTE: Uncomment this if you want to filter people dynamically based upon a specific parameter
|
|
|
|
// const filteredPeople = people
|
|
// .filter((p) => !team.includes(p.id))
|
|
// .filter((p) => p.imageUrl);
|
|
|
|
// Limit the number of members to 12 (2 rows with a max of 6 columns each)
|
|
const limitedPeople = filteredPeople.slice(0, 12);
|
|
|
|
function personLink(person) {
|
|
return person.refs?.twitter
|
|
? `https://twitter.com/${person.refs.twitter}`
|
|
: person.refs?.bsky
|
|
? `https://bsky.app/profile/${person.refs.bsky}`
|
|
: "#";
|
|
}
|
|
|
|
function truncateCaption(caption) {
|
|
if (!caption) return "";
|
|
const words = caption.split(" ");
|
|
if (words.length > 10) {
|
|
return words.slice(0, 20).join(" ") + "...";
|
|
}
|
|
return caption;
|
|
}
|
|
---
|
|
|
|
<div
|
|
class="grid place-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
|
|
>
|
|
{
|
|
limitedPeople.map((person) => (
|
|
<div class=" max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
|
|
<a href={personLink(person)}>
|
|
<img
|
|
src={person.imageUrl}
|
|
alt={person.name}
|
|
class="w-full h-48 object-cover filter grayscale"
|
|
/>
|
|
</a>
|
|
<div class=" flex items-center justify-center flex-col pt-8">
|
|
<h3 class="text-lg font-bold">{person.name}</h3>
|
|
{person.refs && person.refs.twitter && (
|
|
<p class="text-sm text-gray-500">@{person.refs.twitter}</p>
|
|
)}
|
|
{/* <p class="text-sm">{truncateCaption(person.caption)}</p> */}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|