10h30/astroplate
1
0
Fork 0
mirror of https://github.com/10h30/astroplate.git synced 2026-07-16 21:23:30 +09:00
Code Issues Packages Projects Releases Wiki Activity

added dynamicIcon

Browse Source
This commit is contained in:
somrat sorkar
2023-06-27 15:12:29 +06:00
parent fdaf7880a5
commit ad03af58a3
13 changed files with 139 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/components/AuthorCard.astro
+1 -1
View File
@@ -1,6 +1,6 @@
---
import { Image } from "@astrojs/image/components";
import { plainify } from "@/lib/utils/textConverter";
import { Image } from "@astrojs/image/components";
import Social from "./Social.astro";
const { data } = Astro.props;
src/layouts/components/Social.astro
+13 -516
View File
@@ -1,531 +1,28 @@
---
const { source, className } = Astro.props;
import DynamicIcon from "@/helpers/DynamicIcon";
import {
IoCall,
IoGlobeOutline,
IoLocation,
IoLogoBehance,
IoLogoBitbucket,
IoLogoCodepen,
IoLogoDiscord,
IoLogoDribbble,
IoLogoFacebook,
IoLogoFoursquare,
IoLogoGithub,
IoLogoGitlab,
IoLogoInstagram,
IoLogoLinkedin,
IoLogoMastodon,
IoLogoMedium,
IoLogoPinterest,
IoLogoReddit,
IoLogoRss,
IoLogoSkype,
IoLogoSlack,
IoLogoSnapchat,
IoLogoSoundcloud,
IoLogoTiktok,
IoLogoTumblr,
IoLogoTwitter,
IoLogoVimeo,
IoLogoVk,
IoLogoWhatsapp,
IoLogoYoutube,
IoMail,
} from "react-icons/io5/index.js";
type SocialLink = {
facebook: string;
twitter: string;
mastodon: string;
instagram: string;
youtube: string;
linkedin: string;
github: string;
gitlab: string;
discord: string;
slack: string;
medium: string;
codepen: string;
bitbucket: string;
dribbble: string;
behance: string;
pinterest: string;
soundcloud: string;
tumblr: string;
reddit: string;
vk: string;
whatsapp: string;
snapchat: string;
vimeo: string;
tiktok: string;
foursquare: string;
rss: string;
email: string;
phone: string;
address: string;
skype: string;
website: string;
};
const {
facebook,
twitter,
mastodon,
instagram,
youtube,
linkedin,
github,
gitlab,
discord,
slack,
medium,
codepen,
bitbucket,
dribbble,
behance,
pinterest,
soundcloud,
tumblr,
reddit,
vk,
whatsapp,
snapchat,
vimeo,
tiktok,
foursquare,
rss,
email,
phone,
address,
skype,
website,
}: SocialLink = source;
export interface ISocial {
name: string;
icon: string;
link: string;
}
---
<ul class={className}>
{
facebook && (
<li class="inline-block">
source.map((social: ISocial) => (
<li>
<a
aria-label="facebook"
href={facebook}
aria-label={social.name}
href={social.link}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoFacebook />
<span class="sr-only">{social.name}</span>
<DynamicIcon class="inline-block" icon={social.icon} />
</a>
</li>
)
}
{
twitter && (
<li class="inline-block">
<a
aria-label="twitter"
href={twitter}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoTwitter />
</a>
</li>
)
}
{
mastodon && (
<li class="inline-block">
<a
aria-label="mastodon"
href={mastodon}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoMastodon />
</a>
</li>
)
}
{
instagram && (
<li class="inline-block">
<a
aria-label="instagram"
href={instagram}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoInstagram />
</a>
</li>
)
}
{
youtube && (
<li class="inline-block">
<a
aria-label="youtube"
href={youtube}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoYoutube />
</a>
</li>
)
}
{
linkedin && (
<li class="inline-block">
<a
aria-label="linkedin"
href={linkedin}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoLinkedin />
</a>
</li>
)
}
{
github && (
<li class="inline-block">
<a
aria-label="github"
href={github}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoGithub />
</a>
</li>
)
}
{
gitlab && (
<li class="inline-block">
<a
aria-label="gitlab"
href={gitlab}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoGitlab />
</a>
</li>
)
}
{
discord && (
<li class="inline-block">
<a
aria-label="discord"
href={discord}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoDiscord />
</a>
</li>
)
}
{
slack && (
<li class="inline-block">
<a
aria-label="slack"
href={slack}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSlack />
</a>
</li>
)
}
{
medium && (
<li class="inline-block">
<a
aria-label="medium"
href={medium}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoMedium />
</a>
</li>
)
}
{
codepen && (
<li class="inline-block">
<a
aria-label="codepen"
href={codepen}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoCodepen />
</a>
</li>
)
}
{
bitbucket && (
<li class="inline-block">
<a
aria-label="bitbucket"
href={bitbucket}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoBitbucket />
</a>
</li>
)
}
{
dribbble && (
<li class="inline-block">
<a
aria-label="dribbble"
href={dribbble}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoDribbble />
</a>
</li>
)
}
{
behance && (
<li class="inline-block">
<a
aria-label="behance"
href={behance}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoBehance />
</a>
</li>
)
}
{
pinterest && (
<li class="inline-block">
<a
aria-label="pinterest"
href={pinterest}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoPinterest />
</a>
</li>
)
}
{
soundcloud && (
<li class="inline-block">
<a
aria-label="soundcloud"
href={soundcloud}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSoundcloud />
</a>
</li>
)
}
{
tumblr && (
<li class="inline-block">
<a
aria-label="tumblr"
href={tumblr}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoTumblr />
</a>
</li>
)
}
{
reddit && (
<li class="inline-block">
<a
aria-label="reddit"
href={reddit}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoReddit />
</a>
</li>
)
}
{
vk && (
<li class="inline-block">
<a
aria-label="vk"
href={vk}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoVk />
</a>
</li>
)
}
{
whatsapp && (
<li class="inline-block">
<a
aria-label="whatsapp"
href={whatsapp}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoWhatsapp />
</a>
</li>
)
}
{
snapchat && (
<li class="inline-block">
<a
aria-label="snapchat"
href={snapchat}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSnapchat />
</a>
</li>
)
}
{
vimeo && (
<li class="inline-block">
<a
aria-label="vimeo"
href={vimeo}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoVimeo />
</a>
</li>
)
}
{
tiktok && (
<li class="inline-block">
<a
aria-label="tiktok"
href={tiktok}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoTiktok />
</a>
</li>
)
}
{
foursquare && (
<li class="inline-block">
<a
aria-label="foursquare"
href={foursquare}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoFoursquare />
</a>
</li>
)
}
{
skype && (
<li class="inline-block">
<a
aria-label="skype"
href={skype}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSkype />
</a>
</li>
)
}
{
website && (
<li class="inline-block">
<a
aria-label="website"
href={website}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoGlobeOutline />
</a>
</li>
)
}
{
rss && (
<li class="inline-block">
<a
aria-label="rss feed"
href={rss}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoRss />
</a>
</li>
)
}
{
email && (
<li class="inline-block">
<a aria-label="email" href={`mailto:${email}`}>
<IoMail />
</a>
</li>
)
}
{
phone && (
<li class="inline-block">
<a aria-label="telephone" href={`tel:${phone}`}>
<IoCall />
</a>
</li>
)
}
{
address && (
<li class="inline-block">
<a
aria-label="location"
href={address}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLocation />
</a>
</li>
)
))
}
</ul>