Files
angular-challenges/docs/src/components/Author.astro
2023-11-23 22:42:52 +04:00

41 lines
925 B
Plaintext

---
import { Icon } from '@astrojs/starlight/components';
interface Props {
name: string;
twitter?: string;
linkedin?: string;
github?: string;
}
const { name, twitter, linkedin, github } = Astro.props;
---
<p class="author">
Created by {name}
{twitter && <a href={twitter}><Icon class='icon' name="twitter" size="0.75rem" /></a>}
{linkedin && <a href={linkedin}><Icon class='icon' name="linkedin" size="0.75rem" /></a>}
{github && <a href={github}><Icon class='icon' name="github" size="0.75rem" /></a>}
</p>
<style>
.author {
display: flex;
gap: 0.5rem;
align-items: center;
margin-top: -1rem;
font-size: var(--sl-text-xs);
color: var(--sl-color-gray-3);
}
.icon {
vertical-align: middle;
color: var(--sl-color-gray-3);
&:hover {
color: var(--sl-color-accent-high)
}
}
</style>