-
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.
Merge pull request #47 from 46ki75/release/v0.2.2
Release/v0.2.2
- Loading branch information
Showing
11 changed files
with
1,448 additions
and
953 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
Binary file not shown.
Binary file not shown.
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,4 @@ | ||
| // media breakpoints | ||
| $breakpoint-mobile: 576px; | ||
| $breakpoint-tablet: 768px; | ||
| $breakpoint-desktop: 992px; |
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,10 @@ | ||
| .parallax { | ||
| position: fixed; | ||
| height: 2000vh; | ||
| width: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: -1; | ||
| background-repeat: repeat; | ||
| background-size: auto; | ||
| } |
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,31 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { Parallax } from './Parallax' | ||
|
|
||
| const meta: Meta<typeof Parallax> = { | ||
| title: 'Components/Containment/Parallax', | ||
| component: Parallax, | ||
| tags: ['autodocs'] | ||
| } | ||
|
|
||
| export default meta | ||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const Primary: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <div style={{ width: '100%' }}> | ||
| <Parallax {...args} /> | ||
| {new Array(100).fill(0).map((_, i) => ( | ||
| <h1 key={i} style={{ color: 'gray' }}> | ||
| TEXT CONTENT {i} | ||
| </h1> | ||
| ))} | ||
| </div> | ||
| ) | ||
| }, | ||
| args: { | ||
| isDark: false, | ||
| imageUrl1: '/images/bg1.webp', | ||
| imageUrl2: '/images/bg2.webp' | ||
| } | ||
| } |
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,72 @@ | ||
| import React from 'react' | ||
| import isEqual from 'react-fast-compare' | ||
| import styles from './Parallax.module.scss' | ||
| import { useWindowScroll } from 'react-use' | ||
|
|
||
| // # -------------------------------------------------------------------------------- | ||
| // | ||
| // props | ||
| // | ||
| // # -------------------------------------------------------------------------------- | ||
|
|
||
| export interface ParallaxProps { | ||
| style?: React.CSSProperties | ||
|
|
||
| /** | ||
| * Whether or not to use the dark theme | ||
| */ | ||
| isDark?: boolean | ||
|
|
||
| imageUrl1: string | ||
|
|
||
| imageUrl2: string | ||
| } | ||
|
|
||
| // # -------------------------------------------------------------------------------- | ||
| // | ||
| // component | ||
| // | ||
| // # -------------------------------------------------------------------------------- | ||
|
|
||
| const ParallaxComponent = ({ | ||
| style, | ||
| isDark = typeof window !== 'undefined' | ||
| ? window.matchMedia('(prefers-color-scheme: dark)').matches | ||
| : false, | ||
| imageUrl1, | ||
| imageUrl2 | ||
| }: ParallaxProps) => { | ||
| const { y } = useWindowScroll() | ||
| const opacity = isDark ? 0.08 : 0.5 | ||
| return ( | ||
| <> | ||
| <div | ||
| className={styles.parallax} | ||
| style={{ | ||
| backgroundImage: `url(${imageUrl1})`, | ||
| transform: `scale(1.2) translateY(${y / 400}%)`, | ||
| transformOrigin: 'bottom', | ||
| opacity, | ||
| ...style | ||
| }} | ||
| ></div> | ||
| <div | ||
| className={styles.parallax} | ||
| style={{ | ||
| backgroundImage: `url(${imageUrl2})`, | ||
| transform: `scale(1.2) translateY(${y / 900}%)`, | ||
| transformOrigin: 'bottom', | ||
| opacity | ||
| }} | ||
| ></div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| // # -------------------------------------------------------------------------------- | ||
| // | ||
| // memoize | ||
| // | ||
| // # -------------------------------------------------------------------------------- | ||
|
|
||
| export const Parallax = React.memo(ParallaxComponent, isEqual) |
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,72 @@ | ||
| @use '../../mixins'; | ||
| @use '../../variables'; | ||
|
|
||
| .card { | ||
| all: unset; | ||
| position: relative; | ||
|
|
||
| height: 100%; | ||
| width: 100%; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
|
|
||
| box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1); | ||
|
|
||
| cursor: pointer; | ||
|
|
||
| transition: | ||
| opacity 400ms, | ||
| background-color 400ms, | ||
| transform 200ms; | ||
|
|
||
| @include mixins.fade-in(); | ||
|
|
||
| @media (max-width: variables.$breakpoint-mobile) { | ||
| width: 100%; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| @media (min-width: variables.$breakpoint-mobile) and (max-width: variables.$breakpoint-desktop) { | ||
| box-sizing: border-box; | ||
| width: calc(50% - 0.5rem); | ||
| } | ||
|
|
||
| &:hover { | ||
| transform: translateX(-2px) translateY(-2px); | ||
| background-color: rgba($color: #6987b8, $alpha: 0.2); | ||
| } | ||
|
|
||
| &:active { | ||
| transform: translateX(2px) translateY(2px); | ||
| background-color: rgba($color: #b8a36e, $alpha: 0.2); | ||
| } | ||
|
|
||
| &__typography { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: flex-start; | ||
| padding: 0.5rem; | ||
| gap: 0.25rem; | ||
| } | ||
|
|
||
| &__date { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| &__icon { | ||
| width: 16px; | ||
| height: 16px; | ||
| opacity: 0.6; | ||
| } | ||
| } |
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,25 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { ArticleCard } from './ArticleCard' | ||
|
|
||
| const meta: Meta<typeof ArticleCard> = { | ||
| title: 'Components/Navigation/ArticleCard', | ||
| component: ArticleCard, | ||
| tags: ['autodocs'] | ||
| } | ||
|
|
||
| export default meta | ||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const Placeholder: Story = { | ||
| args: { | ||
| isDark: false, | ||
| maxWidth: '520px', | ||
| title: 'Placeholder Title', | ||
| description: | ||
| 'This is a placeholder description for the ArticleCard component.', | ||
| image: | ||
| 'https://web-toolbox.dev/__og-image__/static/en/tools/ogp-checker/og.png', | ||
| createdAt: '2023-10-01', | ||
| updatedAt: '2023-10-01' | ||
| } | ||
| } |
Oops, something went wrong.