Browse Source
feat: FlickerList and Container allow props passthrough
master
Failed to extract signature
2 changed files with
9 additions and
2 deletions
-
src/components/Container.tsx
-
src/components/FlickerList.tsx
|
|
@ -41,7 +41,9 @@ const Container: React.FC<{ |
|
|
|
!child || typeof child === "string" |
|
|
|
? child |
|
|
|
: React.cloneElement(child, { |
|
|
|
...child.props, |
|
|
|
style: { |
|
|
|
...child.props.style, |
|
|
|
opacity: 0, |
|
|
|
transform: "translateY(3rem)", |
|
|
|
transition: "all 300ms", |
|
|
|
|
|
@ -23,9 +23,11 @@ const Flicker: React.FC<{ |
|
|
|
children: React.ReactNode; |
|
|
|
index: number; |
|
|
|
description: string; |
|
|
|
}> = ({ children, index, description }) => { |
|
|
|
style?: React.CSSProperties; |
|
|
|
}> = ({ children, index, description, style }) => { |
|
|
|
return ( |
|
|
|
<span |
|
|
|
style={style} |
|
|
|
className={css` |
|
|
|
position: relative; |
|
|
|
|
|
|
@ -89,6 +91,7 @@ const Flicker: React.FC<{ |
|
|
|
transition: opacity 0.2s; |
|
|
|
user-select: none; |
|
|
|
text-align: left; |
|
|
|
pointer-events: none; |
|
|
|
|
|
|
|
@media screen and (max-width: 65rem) { |
|
|
|
position: fixed; |
|
|
@ -106,9 +109,11 @@ const Flicker: React.FC<{ |
|
|
|
|
|
|
|
const FlickerList: React.FC<{ |
|
|
|
list: { text: string; description: string }[]; |
|
|
|
}> = ({ list }) => { |
|
|
|
style?: React.CSSProperties; |
|
|
|
}> = ({ list, style }) => { |
|
|
|
return ( |
|
|
|
<ul |
|
|
|
style={style} |
|
|
|
className={css` |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|