Introduce Custom Theming

v3xlabs · Oct 30, 2023 · ac9dca6 · ac9dca6
1 parent 5f8cfa2
commit ac9dca6
Show file tree

Hide file tree

Showing 16 changed files with 351 additions and 71 deletions.
diff --git a/app/[slug]/layout.tsx b/app/[slug]/layout.tsx
@@ -0,0 +1,23 @@
+import '../styles/frensday.css';
+import '../styles/generic.css';
+
+import React from 'react';
+
+// export const metadata = {
+//     title: 'Next.js',
+//     description: 'Generated by Next.js',
+// };
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+    params: { slug: string };
+    searchParams: { event?: string; iykRef?: string };
+}) {
+    return (
+        // <html lang="en">
+        <div>{children}</div>
+        // </html>
+    );
+}
diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
@@ -1,15 +1,21 @@
 /* eslint-disable unicorn/prevent-abbreviations */
 import { ens_normalize } from '@adraffy/ens-normalize';
+import clsx from 'clsx';
 import { Metadata } from 'next';
 
-import { MonsterOverlay } from '../../components/Monsters/Overlay';
+import { MonsterOverlay } from '../../components/events/frensday/Monsters/Overlay';
+import { EventHeader } from '../../components/Headers/EventHeader';
 import { SPOAPModal } from '../../components/POAPModal/SPOAPModal';
 import { RecordsSection } from '../../components/Records/records';
 import { XMTPSection } from '../../components/XMTP/section';
 import { useEnstate } from '../../hooks/useEnstate';
 import { useIYKRef } from '../../hooks/useIYKRef';
 import { useWarpcast } from '../../hooks/useWarpcast';
 
+const theme2Class = {
+    frensday2023: 'theme-frensday2023',
+};
+
 export default async function ({
     params: { slug },
     searchParams: { event, iykRef },
@@ -19,6 +25,7 @@ export default async function ({
 }) {
     const raw_name = slug;
     const name = ens_normalize(raw_name.toLowerCase());
+    const ad_class: string = theme2Class[event] || 'theme-generic';
 
     if (raw_name.toLowerCase() !== name) {
         throw new Error('Invalid ENS name');
@@ -31,16 +38,9 @@ export default async function ({
     ]);
 
     return (
-        <div className="w-full mt-4 lg:mt-10 px-6 py-8 pb-64">
+        <div className={clsx('w-full mt-4 lg:mt-10 px-6 py-8 pb-64', ad_class)}>
             <div className="w-full max-w-md2 mx-auto flex flex-col gap-8">
-                <div className="text-center px-4">
-                    <img
-                        src="/frensday_2.svg"
-                        alt="frensday"
-                        className="w-full h-auto mx-auto"
-                    />
-                    <div>November 13 2023, Istanbul Türkiye</div>
-                </div>
+                <EventHeader event={event} />
                 <div className="w-full flex flex-col gap-2 items-center justify-center">
                     <div className="flex items-center relative w-full pt-8 pb-2">
                         <div className="mx-auto w-40 h-40 aspect-square border bg-white rounded-full overflow-hidden z-10">
@@ -50,9 +50,11 @@ export default async function ({
                                 className="w-full h-full"
                             />
                         </div>
-                        <div className="absolute inset-0">
-                            <MonsterOverlay />
-                        </div>
+                        {event == 'frensday2023' && (
+                            <div className="absolute inset-0">
+                                <MonsterOverlay />
+                            </div>
+                        )}
                     </div>
                     <div className="text-center px-2 space-y-2">
                         <div className="text-3xl font-extrabold text-center">
@@ -64,7 +66,12 @@ export default async function ({
                     </div>
                 </div>
                 <RecordsSection enstate={enstate} farcaster={farcaster} />
-                <XMTPSection address={enstate.address} name={enstate.name} />
+                {event == 'frensday2023' && (
+                    <XMTPSection
+                        address={enstate.address}
+                        name={enstate.name}
+                    />
+                )}
                 {iykData && <SPOAPModal data={iykData} name={enstate.name} />}
             </div>
         </div>

diff --git a/app/global.css b/app/global.css
@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.btn {
-    @apply bg-[#7116EB] relative rounded-lg flex items-center justify-center gap-2 hover:bg-[#781dff] transition-colors duration-200 ease-in-out active:bg-[#5e0fc8];
-}
-
 .balance {
     text-wrap: pretty;
     text-wrap: balance;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -14,7 +14,8 @@ export default function RootLayout({
 }) {
     return (
         <html lang="en">
-            <body className="bg-[#2A2244] text-white">{children}</body>
+            <body>{children}</body>
+            {/* <body className="bg-[#2A2244] text-white">{children}</body> */}
         </html>
     );
 }
diff --git a/app/styles/frensday.css b/app/styles/frensday.css
@@ -0,0 +1,8 @@
+html:has(.theme-frensday2023) {
+    body {
+        @apply bg-[#2A2244] text-white;
+    }
+    .btn {
+        @apply bg-[#7116EB] hover:bg-[#781dff] active:bg-[#5e0fc8];
+    }
+}
diff --git a/app/styles/generic.css b/app/styles/generic.css
@@ -0,0 +1,21 @@
+.btn {
+    @apply relative rounded-lg flex items-center justify-center gap-2 transition-colors duration-200 ease-in-out;
+}
+
+html:has(.theme-generic) {
+    body {
+        @apply bg-ens-light-background-secondary text-ens-light-text-primary;
+    }
+    .btn {
+        @apply bg-ens-light-blue-primary text-ens-light-text-accent hover:bg-ens-light-blue-bright active:bg-ens-light-blue-active;
+    }
+    .btn-twitter {
+        @apply bg-black text-white hover:bg-[#222] active:bg-[#333];
+    }
+    .btn-telegram {
+        @apply bg-[#33ABE0] hover:bg-[#33ABE0] active:bg-[#33ABE0] hover:brightness-105 active:brightness-95;
+    }
+    .btn-url {
+        @apply bg-ens-light-purple-primary hover:bg-ens-light-purple-bright active:bg-ens-light-purple-active;
+    }
+}
diff --git a/components/AButton/button.tsx b/components/AButton/button.tsx
@@ -1,11 +1,15 @@
+import clsx from 'clsx';
 import { FC, PropsWithChildren } from 'react';
 
-export const AButton: FC<PropsWithChildren<{ href: string }>> = ({
-    children,
-    href,
-}) => {
+export const AButton: FC<
+    PropsWithChildren<{ href: string; className?: string }>
+> = ({ children, href, className }) => {
     return (
-        <a href={href} target="_blank" className="btn px-4 py-3">
+        <a
+            href={href}
+            target="_blank"
+            className={clsx('btn px-4 py-3', className)}
+        >
             {children}
         </a>
     );

diff --git a/components/Headers/EventHeader.tsx b/components/Headers/EventHeader.tsx
@@ -0,0 +1,16 @@
+export const EventHeader = ({ event }) => {
+    if (event == 'frensday2023') {
+        return (
+            <div className="text-center px-4">
+                <img
+                    src="/frensday_2.svg"
+                    alt="frensday"
+                    className="w-full h-auto mx-auto"
+                />
+                <div>November 13 2023, Istanbul Türkiye</div>
+            </div>
+        );
+    }
+
+    return <></>;
+};
diff --git a/components/POAPModal/POAPModal.tsx b/components/POAPModal/POAPModal.tsx
@@ -7,7 +7,7 @@ import { IYKRefResponse as IYKReferenceResponse } from '../../hooks/useIYKRef';
 import { POAPMetadata } from '../../hooks/usePOAPData';
 import { Creeper } from './Creeper';
 
-const SHOW_POAP_ANYWAYS = true;
+const SHOW_POAP_ANYWAYS = false;
 
 // 10 days
 const HIDE_AFTER_TIME = 1000 * 60 * 60 * 24 * 100;

diff --git a/components/Records/records.tsx b/components/Records/records.tsx
@@ -14,7 +14,10 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => {
 
     if (key == 'com.twitter') {
         return (
-            <AButton href={'https://twitter.com/' + formatted}>
+            <AButton
+                href={'https://twitter.com/' + formatted}
+                className="btn-twitter"
+            >
                 <FiTwitter />
                 {formatted || value}
             </AButton>
@@ -25,7 +28,7 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => {
         const { hostname } = new URL(formatted || value);
 
         return (
-            <AButton href={value}>
+            <AButton href={value} className="btn-url">
                 <FiLink />
                 {hostname}
             </AButton>
@@ -34,7 +37,10 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => {
 
     if (key == 'com.github') {
         return (
-            <AButton href={'https://github.com/' + (formatted || value)}>
+            <AButton
+                href={'https://github.com/' + (formatted || value)}
+                className="btn-github"
+            >
                 <FiGithub />
                 {formatted || value}
             </AButton>
@@ -45,6 +51,7 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => {
         return (
             <AButton
                 href={'https://t.me/' + (formatted || value).replace(/^@/, '')}
+                className="btn-telegram"
             >
                 <FaTelegram />
                 {formatted || value}

diff --git a/components/Monsters/Monster.tsx → ...ents/events/frensday/Monsters/Monster.tsx b/components/Monsters/Monster.tsx → ...ents/events/frensday/Monsters/Monster.tsx
diff --git a/components/Monsters/Overlay.tsx → ...ents/events/frensday/Monsters/Overlay.tsx b/components/Monsters/Overlay.tsx → ...ents/events/frensday/Monsters/Overlay.tsx
diff --git a/package.json b/package.json
@@ -17,8 +17,9 @@
         "@ens-tools/format": "^0.0.2",
         "autoprefixer": "^10.4.14",
         "clsx": "^2.0.0",
-        "next": "^13.5.0",
+        "next": "^13.4.10",
         "postcss": "^8.4.26",
+        "postcss-nested": "^6.0.1",
         "react": "^18.2.0",
         "react-icons": "^4.11.0",
         "short-number": "^1.0.7",