Skip to content

Commit

Permalink
dry social comp and add new types
Browse files Browse the repository at this point in the history
  • Loading branch information
@secondl1ght
secondl1ght committed May 22, 2023
1 parent ed14895 commit 775a275
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 193 deletions.
113 changes: 24 additions & 89 deletions src/components/CommunityCard.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import { Tip, SponsorBadge, Icon } from '$comp';
import { Tip, SponsorBadge, Socials } from '$comp';
export let id;
export let tags;
Expand All @@ -21,6 +21,8 @@
$: whatsapp = tags['contact:whatsapp'] && tags['contact:whatsapp'];
$: facebook = tags['contact:facebook'] && tags['contact:facebook'];
$: linkedin = tags['contact:linkedin'] && tags['contact:linkedin'];
$: rss = tags['contact:rss'] && tags['contact:rss'];
$: signal = tags['contact:signal'] && tags['contact:signal'];
$: tip =
(tags['tips:lightning_address'] && {
destination: tags['tips:lightning_address'],
Expand Down Expand Up @@ -51,92 +53,25 @@
{/if}
</div>

<div class="flex w-full flex-wrap items-center justify-center border-t border-t-statBorder p-4">
{#if website}
<a href={website} target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-bitcoin">
<i class="fa-solid fa-globe h-7 w-7 text-white" />
</span>
</a>
{/if}
{#if email}
<a href="mailto:{email}" target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-[#53C5D5]">
<i class="fa-solid fa-envelope h-7 w-7 text-white" />
</span>
</a>
{/if}
{#if nostr}
<a href="https://snort.social/p/{nostr}" target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-nostr">
<Icon w="28" h="28" icon="nostr" type="socials" style="text-white" />
</span>
</a>
{/if}
{#if twitter}
<a href={twitter} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/twitter.svg" alt="twitter" />
</a>
{/if}
{#if secondTwitter}
<a href={secondTwitter} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/twitter.svg" alt="twitter" />
</a>
{/if}
{#if meetup}
<a href={meetup} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/meetup.jpg" alt="meetup" class="h-10 w-10 rounded-full" />
</a>
{/if}
{#if eventbrite}
<a href={eventbrite} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/eventbrite.png" alt="eventbrite" class="h-10 w-10 rounded-full" />
</a>
{/if}
{#if telegram}
<a href={telegram} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/telegram.svg" alt="telegram" />
</a>
{/if}
{#if discord}
<a href={discord} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/discord.svg" alt="discord" />
</a>
{/if}
{#if youtube}
<a href={youtube} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/youtube.svg" alt="youtube" />
</a>
{/if}
{#if github}
<a href={github} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/github.svg" alt="github" />
</a>
{/if}
{#if reddit}
<a href={reddit} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/reddit.svg" alt="reddit" />
</a>
{/if}
{#if instagram}
<a href={instagram} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/instagram.svg" alt="instagram" class="h-10 w-10 rounded-full" />
</a>
{/if}
{#if whatsapp}
<a href={whatsapp} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/whatsapp.svg" alt="whatsapp" />
</a>
{/if}
{#if facebook}
<a href={facebook} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/facebook.svg" alt="facebook" />
</a>
{/if}
{#if linkedin}
<a href={linkedin} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/linkedin.svg" alt="linkedin" />
</a>
{/if}
</div>
<Socials
{website}
{email}
{nostr}
{twitter}
{secondTwitter}
{meetup}
{eventbrite}
{telegram}
{discord}
{youtube}
{github}
{reddit}
{instagram}
{whatsapp}
{facebook}
{linkedin}
{rss}
{signal}
style="border-t border-t-statBorder p-4 w-full"
/>
</div>
125 changes: 125 additions & 0 deletions src/components/Socials.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<script>
export let website = undefined;
export let email = undefined;
export let nostr = undefined;
export let twitter = undefined;
export let secondTwitter = undefined;
export let meetup = undefined;
export let eventbrite = undefined;
export let telegram = undefined;
export let discord = undefined;
export let youtube = undefined;
export let github = undefined;
export let reddit = undefined;
export let instagram = undefined;
export let whatsapp = undefined;
export let facebook = undefined;
export let linkedin = undefined;
export let rss = undefined;
export let signal = undefined;
export let style = undefined;
import { Icon } from '$comp';
</script>

<div class="flex flex-wrap items-center justify-center {style || ''}">
{#if website}
<a href={website} target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-bitcoin">
<i class="fa-solid fa-globe h-7 w-7 text-white" />
</span>
</a>
{/if}
{#if email}
<a href="mailto:{email}" target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-[#53C5D5]">
<i class="fa-solid fa-envelope h-7 w-7 text-white" />
</span>
</a>
{/if}
{#if nostr}
<a href="https://snort.social/p/{nostr}" target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-nostr">
<Icon w="28" h="28" icon="nostr" type="socials" style="text-white" />
</span>
</a>
{/if}
{#if twitter}
<a href={twitter} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/twitter.svg" alt="twitter" />
</a>
{/if}
{#if secondTwitter}
<a href={secondTwitter} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/twitter.svg" alt="twitter" />
</a>
{/if}
{#if meetup}
<a href={meetup} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/meetup.jpg" alt="meetup" class="h-10 w-10 rounded-full" />
</a>
{/if}
{#if eventbrite}
<a href={eventbrite} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/eventbrite.png" alt="eventbrite" class="h-10 w-10 rounded-full" />
</a>
{/if}
{#if telegram}
<a href={telegram} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/telegram.svg" alt="telegram" />
</a>
{/if}
{#if discord}
<a href={discord} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/discord.svg" alt="discord" />
</a>
{/if}
{#if youtube}
<a href={youtube} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/youtube.svg" alt="youtube" />
</a>
{/if}
{#if github}
<a href={github} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/github.svg" alt="github" />
</a>
{/if}
{#if reddit}
<a href={reddit} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/reddit.svg" alt="reddit" />
</a>
{/if}
{#if instagram}
<a href={instagram} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/instagram.svg" alt="instagram" class="h-10 w-10 rounded-full" />
</a>
{/if}
{#if whatsapp}
<a href={whatsapp} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/whatsapp.svg" alt="whatsapp" />
</a>
{/if}
{#if facebook}
<a href={facebook} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/facebook.svg" alt="facebook" />
</a>
{/if}
{#if linkedin}
<a href={linkedin} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/linkedin.svg" alt="linkedin" />
</a>
{/if}
{#if rss}
<a href={rss} target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-orange-500">
<i class="fa-solid fa-rss h-7 w-7 text-white" />
</span>
</a>
{/if}
{#if signal}
<a href={signal} target="_blank" rel="noreferrer" class="m-1">
<img src="/icons/socials/signal.svg" alt="signal" class="h-10 w-10 rounded-full" />
</a>
{/if}
</div>
1 change: 1 addition & 0 deletions src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,4 @@ export { default as HeaderPlaceholder } from './HeaderPlaceholder.svelte';
export { default as MerchantLink } from './MerchantLink.svelte';
export { default as MerchantButton } from './MerchantButton.svelte';
export { default as MerchantEvent } from './MerchantEvent.svelte';
export { default as Socials } from './Socials.svelte';
Loading

0 comments on commit 775a275

Please sign in to comment.