Browse Source

feat: FlickerList and Container allow props passthrough

master
Muthu Kumar 3 weeks ago
parent
commit
1786dc87d5
Failed to extract signature
  1. 2
      src/components/Container.tsx
  2. 9
      src/components/FlickerList.tsx

2
src/components/Container.tsx

@ -41,7 +41,9 @@ const Container: React.FC<{
!child || typeof child === "string" !child || typeof child === "string"
? child ? child
: React.cloneElement(child, { : React.cloneElement(child, {
...child.props,
style: { style: {
...child.props.style,
opacity: 0, opacity: 0,
transform: "translateY(3rem)", transform: "translateY(3rem)",
transition: "all 300ms", transition: "all 300ms",

9
src/components/FlickerList.tsx

@ -23,9 +23,11 @@ const Flicker: React.FC<{
children: React.ReactNode; children: React.ReactNode;
index: number; index: number;
description: string; description: string;
}> = ({ children, index, description }) => { style?: React.CSSProperties;
}> = ({ children, index, description, style }) => {
return ( return (
<span <span
style={style}
className={css` className={css`
position: relative; position: relative;
@ -89,6 +91,7 @@ const Flicker: React.FC<{
transition: opacity 0.2s; transition: opacity 0.2s;
user-select: none; user-select: none;
text-align: left; text-align: left;
pointer-events: none;
@media screen and (max-width: 65rem) { @media screen and (max-width: 65rem) {
position: fixed; position: fixed;
@ -106,9 +109,11 @@ const Flicker: React.FC<{
const FlickerList: React.FC<{ const FlickerList: React.FC<{
list: { text: string; description: string }[]; list: { text: string; description: string }[];
}> = ({ list }) => { style?: React.CSSProperties;
}> = ({ list, style }) => {
return ( return (
<ul <ul
style={style}
className={css` className={css`
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

Loading…
Cancel
Save