diff options
| author | Nick Tchayka <nick@booster.cloud> | 2023-09-06 13:37:08 +0100 |
|---|---|---|
| committer | Nick Tchayka <nick@booster.cloud> | 2023-09-06 13:37:08 +0100 |
| commit | b8887b6f0befcd4c695b08b80a92cb8616d9df7c (patch) | |
| tree | 9ea0136232a032da528f31740578398fcdabd488 | |
| parent | e276758859025a2927882b6f6c03a55c9d1f54a9 (diff) | |
| download | neohaskell.github.io-b8887b6f0befcd4c695b08b80a92cb8616d9df7c.tar.gz neohaskell.github.io-b8887b6f0befcd4c695b08b80a92cb8616d9df7c.tar.bz2 neohaskell.github.io-b8887b6f0befcd4c695b08b80a92cb8616d9df7c.zip | |
Shuffle feats
| -rw-r--r-- | src/components/HomepageFeatures/index.tsx | 9 |
1 files changed, 6 insertions, 3 deletions
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index e1c42d3..a106a93 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -9,6 +9,7 @@ type ShowCase = | { img: React.ComponentType<React.ComponentProps<"img">> }; type FeatureItem = { + n?: number; title: string; description: JSX.Element; showcase: ShowCase; @@ -77,7 +78,9 @@ const FeatureList: FeatureItem[] = [ }, ]; -function Feature({ title, showcase, description, buttonText }: FeatureItem) { +function Feature({ n, title, showcase, description, buttonText }: FeatureItem) { + const k = n ?? 0; + const reverse = k % 2 === 0 ? "flex-row" : "flex-row-reverse"; const showcaseComponent = "code" in showcase ? ( <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame> @@ -85,7 +88,7 @@ function Feature({ title, showcase, description, buttonText }: FeatureItem) { <showcase.img /> ); return ( - <div className="flex p-4"> + <div className={`flex p-4 ${reverse}`}> {showcaseComponent} <div className="bg-white -z-0 my-7 p-7 border-4 border-black"> <h3 className="text-xl">{title}</h3> @@ -104,7 +107,7 @@ export default function HomepageFeatures(): JSX.Element { <div className="container"> <div className="col"> {FeatureList.map((props, idx) => ( - <Feature key={idx} {...props} /> + <Feature key={idx} {...props} n={idx} /> ))} </div> </div> |