From 1786dc87d5e135e6dea880eedceec3104cf53399 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Wed, 28 Aug 2024 20:15:40 +0530
Subject: [PATCH] feat: FlickerList and Container allow props passthrough

---
 src/components/Container.tsx   | 2 ++
 src/components/FlickerList.tsx | 9 +++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 752a28e..9c85dbe 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.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",
diff --git a/src/components/FlickerList.tsx b/src/components/FlickerList.tsx
index 326b6a2..bc8ee84 100644
--- a/src/components/FlickerList.tsx
+++ b/src/components/FlickerList.tsx
@@ -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;