Skip to content

Commit

Permalink
add batchCta component to reduce code repetition
Browse files Browse the repository at this point in the history
  • Loading branch information
phipsae committed Jan 6, 2025
1 parent 6dfa026 commit 5fab271
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 53 deletions.
34 changes: 34 additions & 0 deletions packages/nextjs/pages/batches/components/BatchCta.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { formatDate } from "../utils/formatDate";
import TrackedLink from "~~/components/TrackedLink";

interface BatchCtaProps {
openBatchNumber: number | null;
openBatchStartDate: number | null;
}

export const BatchCta = ({ openBatchNumber, openBatchStartDate }: BatchCtaProps) => {
return (
<div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
<div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
<div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
<h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
Batch #{openBatchNumber}
</h3>
<p className="text-white">
Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
<strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
</p>
</div>
<div className="flex justify-center lg:justify-end w-full lg:w-auto">
<TrackedLink
id="apply-next-batch"
href="https://speedrunethereum.com/"
className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
>
Go SpeedRunEthereum
</TrackedLink>
</div>
</div>
</div>
);
};
58 changes: 5 additions & 53 deletions packages/nextjs/pages/batches/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { BatchCta } from "./components/BatchCta";
import { formatDate } from "./utils/formatDate";
import type { GetStaticProps } from "next";
import { Footer } from "~~/components/Footer";
import { MetaHeader } from "~~/components/MetaHeader";
Expand Down Expand Up @@ -31,14 +33,6 @@ interface PageProps {
openBatchStartDate: number | null;
}

const formatDate = (timestamp: number): string => {
return new Date(timestamp).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
});
};

// Custom header for the batches page since the "Go to app" button is different
const BatchesHeader = () => {
return (
Expand Down Expand Up @@ -151,29 +145,8 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
</div>
</div>

{/* Next Batch CTA - call to action */}
<div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
<div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
<div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
<h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
Batch #{openBatchNumber}
</h3>
<p className="text-white">
Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
<strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
</p>
</div>
<div className="flex justify-center lg:justify-end w-full lg:w-auto">
<TrackedLink
id="apply-next-batch"
href="https://speedrunethereum.com/"
className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
>
Go SpeedRunEthereum
</TrackedLink>
</div>
</div>
</div>
{/* Next Batch CTA */}
<BatchCta openBatchNumber={openBatchNumber} openBatchStartDate={openBatchStartDate} />
</div>
</div>

Expand Down Expand Up @@ -285,28 +258,7 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
<div className="bg-[#EDEFFF] pt-16 lg:pt-24 pb-16">
<div className="container max-w-[90%] lg:max-w-6xl mx-auto px-4 lg:px-12">
{/* Next Batch CTA */}
<div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
<div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
<div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
<h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
Batch #{openBatchNumber}
</h3>
<p className="text-white">
Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
<strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
</p>
</div>
<div className="flex justify-center lg:justify-end w-full lg:w-auto">
<TrackedLink
id="apply-next-batch"
href="https://speedrunethereum.com/"
className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
>
Go SpeedRunEthereum
</TrackedLink>
</div>
</div>
</div>
<BatchCta openBatchNumber={openBatchNumber} openBatchStartDate={openBatchStartDate} />

<div className="flex justify-center items-center mb-8">
<Image src={"/assets/bg-batches-winners.svg"} alt={"Winners"} width={50} height={50} className="mr-3" />
Expand Down
7 changes: 7 additions & 0 deletions packages/nextjs/pages/batches/utils/formatDate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const formatDate = (timestamp: number): string => {
return new Date(timestamp).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
});
};

0 comments on commit 5fab271

Please sign in to comment.