-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
918294f
commit 6b38ab8
Showing
11 changed files
with
265 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| .button { | ||
| font-size: var(--typography-body-m, 14px); | ||
| position: relative; | ||
| overflow: hidden; | ||
| z-index: 2; | ||
| border-radius: 4px; | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 3rem; | ||
| padding: 0 clamp(1rem, calc(1rem + 1vw / 0.48), 2rem); | ||
| transition: transform 500ms var(--easing); | ||
| @media (max-width: 499px) { | ||
| width: 100%; | ||
| } | ||
| &::before { | ||
| content: ''; | ||
| width: 110%; | ||
| aspect-ratio: 1/1; | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 50%; | ||
| transform: translate(-50%, -50%); | ||
| z-index: -1; | ||
| background-image: conic-gradient( | ||
| var(--primary-500, #064040) 79%, | ||
| #90f4e8 87%, | ||
| #90f4e8 92%, | ||
| var(--primary-500, #064040) 100% | ||
| ); | ||
| animation: rotate 2.5s linear infinite; | ||
| animation-play-state: paused; | ||
| transition: opacity 500ms var(--easing); | ||
| @keyframes rotate { | ||
| from { | ||
| transform: translate(-50%, -50%) rotate(0deg); | ||
| } | ||
| to { | ||
| transform: translate(-50%, -50%) rotate(360deg); | ||
| } | ||
| } | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| z-index: -1; | ||
| left: 1px; | ||
| top: 1px; | ||
| right: 1px; | ||
| bottom: 1px; | ||
| border-radius: inherit; | ||
| background: linear-gradient(266deg, #0b0f0d, #011310, #001f1b); | ||
| } | ||
| .content { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| z-index: 2; | ||
| border-radius: inherit; | ||
| } | ||
| &[data-theme='primary'] { | ||
| span { | ||
| background: linear-gradient(266deg, #2dd282, #90f4e8); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| } | ||
| .content { | ||
| &::before { | ||
| content: ''; | ||
| position: absolute; | ||
| z-index: -1; | ||
| left: 0; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: | ||
| linear-gradient(var(--neutral-900, #000103), var(--neutral-900, #000103)) padding-box, | ||
| linear-gradient(266deg, #2dd282, #90f4e8) border-box; | ||
| border: 1px solid rgba(255, 255, 255, 0); | ||
| border-radius: inherit; | ||
| transition: opacity 500ms var(--easing); | ||
| } | ||
| } | ||
| } | ||
| &[data-theme='secondary'] { | ||
| border-radius: 48px; | ||
| &::before { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| &:disabled { | ||
| opacity: 0.62; | ||
| pointer-events: none; | ||
| } | ||
| img { | ||
| width: 28px; | ||
| height: 28px; | ||
| } | ||
| &:hover { | ||
| &::before { | ||
| animation-play-state: running; | ||
| @media (prefers-reduced-motion) { | ||
| animation-play-state: paused; | ||
| } | ||
| opacity: 1; | ||
| } | ||
| .content { | ||
| &::before { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| } | ||
| &:active { | ||
| transition: none; | ||
| transform: scale(0.99); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import type { ImageDataProps } from '../image'; | ||
| import styles from './button.module.scss' | ||
|
|
||
| export type Props = React.HTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & { | ||
| text?: string | React.ReactNode | ||
| children: React.ReactNode; | ||
| theme?: 'primary' | 'secondary' | ||
| linkType?: 'external' | 'internal' | ||
| href?: string | ||
| img?: ImageDataProps | ||
| className?: string | ||
| } | ||
|
|
||
| export default function Button({ children, text, theme = 'primary', linkType = 'internal', href, img, className, ...props }: Props) { | ||
| const Element = href ? 'a' : 'button' | ||
| const isExternal = linkType === 'external' | ||
| const renderedProps = { | ||
| ...(href && { href }), | ||
| ...(isExternal && { target: '_blank', rel: 'noreferrer' }), | ||
| 'data-theme': theme, | ||
| className: `${styles.button}${className ? ` ${className}` : ''}`, | ||
| ...props, | ||
| } | ||
|
|
||
| return ( | ||
| <Element {...renderedProps}> | ||
| <div className={styles.content}> | ||
| {children} | ||
| </div> | ||
| </Element> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| --- | ||
| import Image from '@/components/ui/image' | ||
| import Button, { type Props as ButtonDataProps } from './button' | ||
| type Props = ButtonDataProps | ||
| const { ...props } = Astro.props | ||
| const svgId = `arrow-icon-${Math.random().toString(36).slice(2, 9)}` | ||
| --- | ||
|
|
||
| <Button {...props}> | ||
| <span> | ||
| {props.text || <slot />} | ||
| </span> | ||
| { | ||
| props.img ? ( | ||
| <Image {...props.img} sizes="28px" class="gradient-thumbnail" /> | ||
| ) : ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none"> | ||
| <path | ||
| stroke={`url(#${svgId})`} | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M2.664 8.5h10.667m0 0-4-4m4 4-4 4" | ||
| /> | ||
| <defs> | ||
| <linearGradient id={svgId} x1="13.131" x2="2.064" y1="4.5" y2="5.44" gradientUnits="userSpaceOnUse"> | ||
| <stop stop-color="#2DD282" /> | ||
| <stop offset="1" stop-color="#90F4E8" /> | ||
| </linearGradient> | ||
| </defs> | ||
| </svg> | ||
| ) | ||
| } | ||
| </Button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { ImageDataQuery } from '../image'; | ||
| export { default } from './index.astro'; | ||
| export { type Props as ButtonDataProps } from './button'; | ||
|
|
||
| export const ButtonDataQuery = (name: string) => ` | ||
| ${name} { | ||
| text, | ||
| theme, | ||
| linkType, | ||
| "href": select(linkType == "internal" => internal -> slug.current, linkType == "external" => external, "#"), | ||
| ${ImageDataQuery('img')} | ||
| }, | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.