Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#7: Tweak the main page #29

Merged
merged 3 commits into from
Nov 24, 2024
Merged

#7: Tweak the main page #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c279fd3
#7: Tweak the main page
kcmikee Nov 13, 2024
d80b62c
fix: lint warning
kcmikee Nov 14, 2024
255d122
fix: light mode text & star bg
kcmikee Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/nextjs/app/builders/0x8Bb563DC969cC3b3e7275474c3847b44dBCB9441/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const MichaelEsenwa: NextPage = () => {
Hi there, I am Kachukwu Michael Esenwa{" "}
</h1>
<div className="h-[100px] w-[100px] lg:w-[300px] lg:h-[300px] shrink-0 !overflow-hidden rounded-full relative lg:hidden">
<Image fill src="https://avatars.githubusercontent.com/u/42065630?v=4" alt="avatar" />
<Image fill src="https://avatars.githubusercontent.com/u/42065630?v=5" alt="avatar" />
</div>
</div>
<hr className="mt-2 border-gray-500" />
Expand Down Expand Up @@ -42,7 +42,7 @@ const MichaelEsenwa: NextPage = () => {
</div>
</div>
<div className="h-[100px] w-[100px] lg:w-[300px] lg:h-[300px] shrink-0 !overflow-hidden rounded-full relative hidden lg:block">
<Image fill src="https://avatars.githubusercontent.com/u/42065630?v=4" alt="avatar" />
<Image fill src="https://avatars.githubusercontent.com/u/42065630?v=5" alt="avatar" />
</div>
</div>
</div>
Expand Down
185 changes: 113 additions & 72 deletions packages/nextjs/app/page.tsx
View file
Open in desktop
kcmikee marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import "../styles/LandingPage.css";
import ShootingStars from "./builders/0x28482B1279E442f49eE76351801232D58f341CB9/components/ShootingStars";
import type { NextPage } from "next";
import { useAccount } from "wagmi";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { StarsBackground } from "~~/components/StarsBg";
import { Address } from "~~/components/scaffold-eth";
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";

Expand All @@ -19,18 +23,34 @@ interface BatchUserStatus {
isLoading: boolean;
}

const images = [
"/bello/bello.jpg",
"/dvm0x742/avatar.jpg",
"/lukmansImages/lukmansAvater.jpeg",
"/michaelNwachukwu-images/michael-nwachukwu.png",
"https://avatars.githubusercontent.com/u/42065630?v=5",
"/0x26BfbD8ED2B302ec2c2B6f063C4caF7abcB062e0-avatar.jpg",
"/avatar.webp",
"/emarc-pixels.jpg",
"/superior.jpeg",
"/cherry/cherrypfp.png",
"https://avatars.githubusercontent.com/u/141290516?v=3",
];

const Alert = ({ children, className = "" }: Props) => (
<div className={`rounded-lg border p-4 mt-6 max-w-md mx-auto ${className}`}>{children}</div>
);

const AlertTitle = ({ children }: Props) => (
<h5 className="mb-1 font-medium leading-none tracking-tight">{children}</h5>
const AlertTitle = ({ children, className }: Props) => (
<h5 className={`mb-1 font-medium leading-none tracking-tight ${className}`}>{children}</h5>
);

const AlertDescription = ({ children }: Props) => <div className="text-sm opacity-70">{children}</div>;
const AlertDescription = ({ children, className }: Props) => (
<div className={`text-sm opacity-70 ${className}`}>{children}</div>
);

const Card = ({ children, className = "" }: Props) => (
<div className={`rounded-lg border bg-card text-card-foreground shadow-sm mt-6 max-w-md mx-auto ${className}`}>
<div className={`rounded-lg border bg-card text-card-foreground shadow-sm mt-6 max-w-xl mx-auto ${className}`}>
{children}
</div>
);
Expand All @@ -39,8 +59,8 @@ const CardHeader = ({ children, className = "" }: Props) => (
<div className={`flex flex-col space-y-1.5 p-6 ${className}`}>{children}</div>
);

const CardTitle = ({ children }: Props) => (
<h3 className="text-xl font-semibold leading-none tracking-tight">{children}</h3>
const CardTitle = ({ children, className }: Props) => (
<h3 className={`text-xl font-semibold leading-none tracking-tight ${className}`}>{children}</h3>
);

const CardContent = ({ children, className = "" }: Props) => <div className={`p-6 pt-0 ${className}`}>{children}</div>;
Expand All @@ -52,8 +72,8 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
<CardContent>
<div className="flex items-center justify-center py-6">
<div className="flex items-center space-x-2">
<div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900"></div>
<p className="text-sm text-muted">Checking your status...</p>
<div className="w-6 h-6 border-b-2 border-gray-900 rounded-full animate-spin"></div>
<p className="text-sm !text-white dark:text-white">Checking your status...</p>
</div>
</div>
</CardContent>
Expand All @@ -64,8 +84,10 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
if (!connectedAddress) {
return (
<Alert className="border-blue-200">
<AlertTitle>Connect Your Wallet</AlertTitle>
<AlertDescription>Please connect your wallet to view your Batch 10 status</AlertDescription>
<AlertTitle className="!text-white dark:!text-white">Connect Your Wallet</AlertTitle>
<AlertDescription className="!text-white dark:text-white">
Please connect your wallet to view your Batch 10 status
</AlertDescription>
</Alert>
);
}
Expand All @@ -75,12 +97,12 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
<Card>
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle>Your Status</CardTitle>
<span className="rounded-full px-2 py-1 text-sm font-medium bg-red-100 text-red-800">Not a Member</span>
<CardTitle className="!text-white dark:!text-white">Your Status</CardTitle>
<span className="px-2 py-1 text-sm font-medium !text-red-800 bg-red-100 rounded-full">Not a Member</span>
</div>
</CardHeader>
<CardContent>
<p className="text-sm opacity-70">You are not currently a member of Batch 10</p>
<p className="text-sm opacity-70 !text-white dark:!text-white">You are not currently a member of Batch 10</p>
</CardContent>
</Card>
);
Expand All @@ -91,29 +113,31 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
<Card>
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle>Your Status</CardTitle>
<span className="rounded-full px-2 py-1 text-sm font-medium bg-yellow-100 text-yellow-800">
<CardTitle className="!text-white dark:!text-white">Your Status</CardTitle>
<span className="px-2 py-1 text-sm font-medium text-yellow-800 bg-yellow-100 rounded-full">
Ready to Check In
</span>
</div>
</CardHeader>
<CardContent>
<p className="text-sm opacity-70">You are a Batch 10 member! Deploy your contract to check in</p>
<p className="text-sm opacity-70 !text-white dark:!text-white">
You are a Batch 10 member! Deploy your contract to check in
</p>
</CardContent>
</Card>
);
}

return (
<Card>
<Card className="w-9/12 md:w-[446px]">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle>Your Status</CardTitle>
<span className="rounded-full px-2 py-1 text-sm font-medium bg-green-100 text-green-800">Checked In</span>
<CardTitle className="!text-white dark:!text-white">Your Status</CardTitle>
<span className="px-2 py-1 text-sm font-medium text-green-800 bg-green-100 rounded-full">Checked In</span>
</div>
</CardHeader>
<CardContent>
<div className="text-sm opacity-70">
<div className="text-sm text-left opacity-70 !text-white dark:!text-white">
Active with wallet address: <Address address={connectedAddress} />
</div>
</CardContent>
Expand Down Expand Up @@ -158,62 +182,79 @@ const Home: NextPage = () => {
const isCheckedIn = userContractAddress && userContractAddress !== "0x0000000000000000000000000000000000000000";

return (
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center">
<span className="block text-2xl mb-2">Welcome to</span>
<span className="block text-4xl font-bold">Batch 10</span>
</h1>
<p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>

{error ? (
<div className="p-4 rounded-lg bg-red-100 text-red-700" role="alert">
<p>Error fetching contract data: {error.message}</p>
</div>
) : (
<div>
<div className="text-lg flex gap-2 justify-center mb-4">
<span className="font-bold">Checked in builders count:</span>
{counterLoading ? (
<span className="animate-pulse">
<div className="h-6 bg-gray-200 rounded w-12"></div>
</span>
) : (
<span>{checkedInCounter !== undefined ? Number(checkedInCounter) : "0"}</span>
)}
<div className="relative flex flex-col items-center flex-grow min-h-screen overflow-hidden bg">
<ShootingStars />
<StarsBackground />
<div className="banner">
<div className="slider" style={{ "--quantity": 11 } as React.CSSProperties}>
{images.map((image, index) => (
<div key={index} className="item" style={{ "--position": index + 1 } as React.CSSProperties}>
<Image src={image} alt={`builder ${index + 1}`} width={300} height={300} />
</div>

<StatusSection
connectedAddress={connectedAddress as string}
isAllowListed={isAllowListed as boolean}
isCheckedIn={isCheckedIn as boolean}
isLoading={isLoading as boolean}
/>
))}
</div>
<div className="content">
<h1 data-content="BATCH 10" className="BuidlGuidl">
BATCH 10
</h1>
<div className="author">
<h2 className="!text-white dark:text-white">Buidl Guidl</h2>
</div>
)}
<div className="model"></div>
</div>
</div>
<div className="!h-max banner">
<div className="flex-grow w-screen z-[9999]">
{error ? (
<div className="p-4 !text-red-700 bg-red-100 rounded-lg" role="alert">
<p>Error fetching contract data: {error.message}</p>
</div>
) : (
<div className="relative">
<div className="flex justify-center gap-2 mb-4 text-lg">
<span className="font-bold !text-white dark:text-white">Checked in builders count:</span>
{counterLoading ? (
<span className="animate-pulse">
<div className="w-12 h-6 bg-gray-200 rounded"></div>
</span>
) : (
<span className="!text-white dark:text-white">
{checkedInCounter !== undefined ? Number(checkedInCounter) : "0"}
</span>
)}
</div>

<div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<BugAntIcon className="h-8 w-8 fill-secondary" />
<p>
Tinker with your smart contract using the{" "}
<Link href="/debug" className="link">
Debug Contracts
</Link>{" "}
tab.
</p>
</div>
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
<p>
Explore your local transactions with the{" "}
<Link href="/blockexplorer" className="link">
Block Explorer
</Link>{" "}
tab.
</p>
<StatusSection
connectedAddress={connectedAddress as string}
isAllowListed={isAllowListed as boolean}
isCheckedIn={isCheckedIn as boolean}
isLoading={isLoading as boolean}
/>
</div>
)}
</div>
<div className="flex-grow w-screen !px-8 !py-12 mt-16 z-[9999]">
<div className="flex flex-col items-center justify-center gap-12 sm:flex-row">
<div className="flex flex-col items-center max-w-xs px-10 py-10 text-center bg-base-100 rounded-3xl">
<BugAntIcon className="w-8 h-8 fill-secondary" />
<p>
Tinker with your smart contract using the{" "}
<Link href="/debug" className="link">
Debug Contracts
</Link>{" "}
tab.
</p>
</div>
<div className="flex flex-col items-center max-w-xs px-10 py-10 text-center bg-base-100 rounded-3xl">
<MagnifyingGlassIcon className="w-8 h-8 fill-secondary" />
<p>
Explore your local transactions with the{" "}
<Link href="/blockexplorer" className="link">
Block Explorer
</Link>{" "}
tab.
</p>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading