Skip to content

Commit

Permalink
components
Browse files Browse the repository at this point in the history
  • Loading branch information
@UpperCod
UpperCod committed Sep 22, 2023
1 parent 0140b6e commit 42415c7
Show file tree
Hide file tree
Showing 8 changed files with 379 additions and 62 deletions.
2 changes: 2 additions & 0 deletions src/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,5 @@ export { SiteBigTitle } from "./site-big-title";
export { SiteGraphDiff } from "./site-graph-diff";
export { SiteCategories } from "./site-category";
export { SiteGradient } from "./site-gradient";
export { SiteAvatar } from "./site-avatar";
export { SiteSocials } from "./site-socials";
40 changes: 40 additions & 0 deletions src/site-avatar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Props, c, css } from "atomico";
import { tokens } from "../site-tokens";

function siteAvatar({ media }: Props<typeof siteAvatar>) {
return (
<host shadowDom>
{!!media && <img src={media} alt="" class="avatar-img" />}
<slot />
</host>
);
}

siteAvatar.props = {
media: String,
label: String,
} satisfies Props;

siteAvatar.styles = [
tokens,
css`
:host {
display: flex;
align-items: center;
--link-background: transparent;
--link-color: unset;
gap: var(--size-2);
text-transform: uppercase;
font-size: var(--size-3);
letter-spacing: var(--size-1);
}
.avatar-img {
width: var(--size-6);
height: var(--size-6);
border-radius: 100vh;
}
`,
];

export const SiteAvatar = c(siteAvatar);
105 changes: 79 additions & 26 deletions src/site-card/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,38 @@
import { c, css, Props } from "atomico";
import { useSlot } from "@atomico/hooks/use-slot";
import { Props, c, css, useRef } from "atomico";
import { tokens } from "../site-tokens";
import { serialize } from "atomico/utils";
function siteCard({ dotColor }: Props<typeof siteCard>) {
const refMedia = useRef();
const refContent = useRef();
const refFooter = useRef();
const slotMedia = useSlot(refMedia);
const slotContent = useSlot(
refContent,
(element) => element instanceof HTMLElement
);
const slotFooter = useSlot(refFooter);
return (
<host shadowDom>
<host
shadowDom
layout={serialize(
slotMedia.length && "media",
slotContent.length && "content",
slotFooter.length && "footer"
)}
>
<div class="dot dot-circle"></div>
<div class="dot dot-gradient"></div>
<div class="media">
<slot name="media" ref={refMedia} />
</div>
<div class="content">
<slot></slot>
<slot ref={refContent}></slot>
</div>
<div class="footer">
<slot name="footer" ref={refFooter}></slot>
</div>
<style>{`:host{--dot-bgcolor:${dotColor}}`}</style>
<style>{`:host{--card-dot-bgcolor:${dotColor}}`}</style>
</host>
);
}
Expand All @@ -23,41 +47,49 @@ siteCard.styles = [
tokens,
css`
:host {
--gap: var(--size-4);
--padding: var(--size-5);
--radius: var(--size-2);
--dot-size: var(--size-2);
--dot-transition: 1s ease all;
background: var(--color-card-background);
border: 1px solid var(--color-card-border);
box-sizing: border-box;
border-radius: var(--radius);
background: var(--color-card-container);
border: var(--card-border);
border-radius: var(--card-border-radius);
position: relative;
display: block;
display: grid;
gap: var(--card-gap);
backdrop-filter: blur(10px);
--display-media: none;
--display-content: none;
--display-footer: none;
}
:host([layout*="media"]) {
--display-media: block;
}
:host([layout*="content"]) {
--display-content: grid;
}
:host([layout*="footer"]) {
--display-footer: flex;
}
:host([dot-color]) .dot {
width: var(--dot-size);
height: var(--dot-size);
background: var(--dot-bgcolor);
transition: var(--dot-transition);
width: var(--card-dot-size);
height: var(--card-dot-size);
background: var(--card-dot-bgcolor);
transition: var(--card-dot-transition);
position: absolute;
}
:host([dot-color]) .dot-circle {
top: 20px;
right: 20px;
border-radius: 100%;
z-index: 2;
}
:host([dot-color]) .dot-gradient {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0;
transition: var(--dot-transition) 0.25s;
transition: var(--card-dot-transition) 0.25s;
background: radial-gradient(
circle at 100% -50%,
var(--dot-bgcolor),
var(--card-dot-bgcolor),
transparent
);
}
Expand All @@ -66,18 +98,39 @@ siteCard.styles = [
opacity: 0.25;
}
:host([dot-color]:hover) .dot {
box-shadow: 0px 0px 42px var(--dot-bgcolor);
box-shadow: 0px 0px 42px var(--card-dot-bgcolor);
}
:host([overflow]) {
overflow: hidden;
}
:host([padding]) {
padding: var(--padding);
::slotted([slot="media"]) {
width: 100%;
object-fit: cover;
display: block;
border: none;
}
.media {
display: var(--display-media);
overflow: hidden;
margin: var(--card-media-space);
border-radius: calc(
var(--card-border-radius) - var(--card-media-space)
);
position: relative;
}
.content {
display: grid;
display: var(--display-content);
position: relative;
gap: var(--card-gap);
padding: var(--card-content-space);
}
.footer {
display: var(--display-footer);
justify-content: space-between;
align-items: center;
border-top: var(--card-border);
padding: var(--card-footer-space);
position: relative;
gap: var(--gap);
}
`,
];
Expand Down
1 change: 1 addition & 0 deletions src/site-header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ siteHeader.styles = [
display: flex;
align-items: center;
justify-content: end;
gap: var(--size-3);
}
@media (max-width: 768px) {
.layout {
Expand Down
100 changes: 100 additions & 0 deletions src/site-socials/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { Props, c, css } from "atomico";
import { tokens } from "../site-tokens";
import { Twitter, Github, Discord, Youtube } from "../site-socials/logos";

function siteSocials({
twitter,
github,
discord,
youtube,
}: Props<typeof siteSocials>) {
return (
<host shadowDom>
{!!twitter && (
<a
href={`https://twitter.com/${twitter}`}
class="link"
target="_blank"
>
<Twitter cloneNode />
</a>
)}
{!!github && (
<a
class="link"
href={`https://github.com/${github}`}
target="_blank"
>
<Github cloneNode />
</a>
)}
{!!discord && (
<a
class="link"
href={`https://discord.com/invite/${discord}`}
target="_blank"
>
<Discord cloneNode />
</a>
)}
{!!youtube && (
<a
class="link"
href={`https://www.youtube.com/${youtube}`}
target="_blank"
>
<Youtube cloneNode />
</a>
)}
</host>
);
}

siteSocials.props = {
twitter: String,
github: String,
discord: String,
youtube: String,
};

siteSocials.styles = [
tokens,
css`
:host {
display: inline-flex;
border-radius: 100px;
border: var(--link-social-border);
padding: var(--link-social-space);
--link-container: var(--color-link-social-container);
--link-invert: var(--color-link-social-invert);
}
.link {
width: var(--link-social-size);
height: var(--link-social-size);
display: flex;
background: none;
color: unset;
border: none;
border-radius: 100px;
background: var(--link-container);
color: var(--link-invert);
align-items: center;
justify-content: center;
transition: var(--link-transition);
cursor: pointer;
}
.link svg {
width: 50%;
height: 50%;
}
.link svg * {
fill: currentColor;
}
.link:hover {
--link-container: var(--color-link-social-invert);
--link-invert: var(--color-link-social-container);
}
`,
];

export const SiteSocials = c(siteSocials);
39 changes: 39 additions & 0 deletions src/site-socials/logos.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { template, JSX } from "atomico";

export const Twitter = template(
<svg viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
fill="white"
/>
</svg>
) as JSX;

export const Github = template(
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 98">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="#fff"
/>
</svg>
) as JSX;

export const Discord = template(
<svg viewBox="0 0 127.14 96.36">
<path
fill="#fff"
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
/>
</svg>
) as JSX;

export const Youtube = template(
<svg viewBox="-35.20005 -41.33325 305.0671 247.9995">
<path
d="M93.333 117.559V47.775l61.334 34.893zm136.43-91.742c-2.699-10.162-10.651-18.165-20.747-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.555 7.652 7.603 15.655 4.904 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.904 56.849c2.699 10.163 10.65 18.165 20.747 20.883 18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.683-4.934c10.096-2.718 18.048-10.72 20.747-20.883 4.904-18.42 4.904-56.85 4.904-56.85s0-38.43-4.904-56.849"
fill="#fff"
/>
</svg>
) as JSX;
Loading

0 comments on commit 42415c7

Please sign in to comment.