Add paystro visual components

2024-06-24 00:05:41 +02:00
parent 0a14bb39de
commit 5eb7b7037b
14 changed files with 583 additions and 44 deletions
--- a/src/app/(app)/global.css
+++ b/src/app/(app)/global.css
@ -0,0 +1,107 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.light {
+
+    --black: 10, 16, 19;
+    --white: 243, 252, 248;
+    --absolute-black: 0, 0, 0;
+    --absolute-white: 255, 255, 255;
+
+    /* Use these in tailwind.config.cjs */
+    --primary: var(--black);
+    --secondary: var(--black);
+    --tertiary: var(--black);
+    
+    --text: var(--black);
+    --textInverted: var(--absolute-white);
+    --link: var(--black);
+    --background: var(--white);
+}
+
+.dark {
+
+    --black: 10, 16, 19;
+    --white: 243, 252, 248;
+    --absolute-black: 0, 0, 0;
+    --absolute-white: 255, 255, 255;
+
+    /* Use these in tailwind.config.cjs */
+    --primary: var(--white);
+    --secondary: var(--white);
+    --tertiary: var(--white);
+    
+    --text: var(--white);
+    --textInverted: var(--absolute-black);
+    --link: var(--white);
+    --background: var(--black);
+}
+
+.autonomic {
+    /* Palette */
+    /* RGBA instead of hex so that opacity will work */
+    --absolute-white: 255, 255, 255;
+    --white: 243, 252, 248;
+    --shocking-pink: 253, 0, 159;
+    --shamrock-green: 0, 198, 88;
+    --bubblegum-pink: 255, 133, 203;
+    --bright-orange: 255, 96, 21;
+
+    /* Use these in tailwind.config.cjs */
+    --primary: var(--shocking-pink);
+    --secondary: var(--shamrock-green);
+    --tertiary: var(--bright-orange);
+    
+    --text: var(--shocking-pink);
+    --textInverted: var(--absolute-white);
+    --link: var(--shamrock-green);
+    --background: var(--white);
+}
+
+@layer components {
+
+    :root {
+        @apply ring-secondary;
+    }
+
+    h1 {
+        @apply text-5xl font-bold;
+    }
+    
+    h2 {
+        @apply text-4xl font-semibold;
+    }
+
+    h3 {
+        @apply text-2xl font-semibold;
+    }
+
+    h4, h5, h6 {
+        @apply text-2xl font-medium;
+    }
+
+    p, span, li, a {
+        @apply text-xl;
+    }
+
+    a {
+        @apply text-link underline;
+    }
+
+    ol {
+        @apply list-decimal;
+    }
+    
+    ul {
+        @apply list-disc;
+    }
+
+    select {
+        @apply bg-background border-primary border px-2 h-8 text-lg;
+    }
+
+    input {
+        @apply bg-background border-primary border px-2 h-8 text-lg;
+    }
+}
--- a/src/app/(app)/globals.css
+++ b/src/app/(app)/globals.css
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@ -1,5 +1,5 @@
 import React from 'react'
-import './globals.css'
+import './global.css'
 /* import { Inter } from 'next/font/google'

 const inter = Inter({
@ -18,7 +18,9 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {

  return (
    <html>
-      <body>{children}</body>
+      <body className="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 text-primary bg-background">
+        {children}
+      </body>
    </html>
  )
 }
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@ -1,20 +1,32 @@
-import { Badge } from '@/components/Badge'
-import { Background } from '@/components/Background'
+import ThemeSwitcher from '@/components/ThemeSwitcher'
+import { getCurrentYear } from '@/utils/date'
 import Link from 'next/link'
 import React from 'react'
-import LexicalContent from '@/components/LexicalContent'
+import Header from '@/components/Header'

-const Page = () => {
-  /* const url = 'http://localhost:3000/api/pages/66781d2fb752297de17a3368?depth=1&draft=false'
-
-  const content = fetch(url)
-  console.log(content) */
+interface Props {}

+const Page = (props: Props) => {
  return (
    <>
-      <h1>Lexical content hereinafter</h1>
-
-      {/* <LexicalContent lazyLoadImages={false} childrenNodes={content?.root?.children} locale={''} /> */}
+      <main className="flex flex-col gap-4 flex-grow">
+        <Header />
+        <h1 className="">Nextload</h1>
+        <p className="mt-3">
+          {`Nextload is a pre-configured setup for Nextjs and PayloadCMS that makes it easy to get started with building your website. With Nextload, you'll have a complete development environment that you can run locally using Docker. This makes it easy to test and develop your website before deploying it to a production environment.`}
+          <br />
+          {`When you're ready to deploy the website on your own server, Nextload comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website.`}
+        </p>
+        {/* <section className="mt-4">
+          <Posts posts={posts} />
+        </section> */}
+      </main>
+      <footer className="flex justify-between items-center py-4">
+        <p className="text-lg font-semibold">
+          &copy; {getCurrentYear()} Autonomic. Template distributed under AGPL 3.0.
+        </p>
+        <ThemeSwitcher />
+      </footer>
    </>
  )
 }
--- a/src/components/Background.tsx
+++ b/src/components/Background.tsx
@ -1,8 +0,0 @@
-export const Background = () => {
-  return (
-    <div className="background">
-      <div className="blur" />
-      <div className="gradient" />
-    </div>
-  )
-}
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@ -1,20 +0,0 @@
-export const Badge = () => {
-  return (
-    <span className="badge">
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.35899 1.59033L16.956 6.233V15.0452L11.2355 18.4097V9.59751L3.62941 4.96095L9.35899 1.59033Z"
-          fill="#ffffff"
-        />
-        <path d="M8.77667 17.9211V11.0447L3.04407 14.4153L8.77667 17.9211Z" fill="#ffffff" />
-      </svg>
-      Beta
-    </span>
-  )
-}
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -0,0 +1,39 @@
+import React from 'react'
+
+type Props = {}
+
+export default function Header({}: Props) {
+  const links = [
+    {
+      label: 'About',
+      link: '/about',
+    },
+    {
+      label: 'Services',
+      link: '/services',
+    },
+    {
+      label: 'Contact',
+      link: '/contact',
+    },
+  ]
+
+  return (
+    <header className="flex justify-between py-6">
+      <div>
+        <a href="/" className="decoration-transparent">
+          <span className="text-2xl font-extrabold ">Logo</span>
+        </a>
+      </div>
+      <nav>
+        <ul className="flex gap-4 font-bold list-none">
+          {links.map((item, index) => (
+            <li className="decoration-transparent" key={`link-${index}`}>
+              <a href={item.link}>{item.label}</a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </header>
+  )
+}
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@ -0,0 +1,17 @@
+'use client'
+import React from 'react'
+import { handleThemeChange, switchTheme, initializeThemeSelector } from '@/utils/theme'
+
+interface Props {}
+
+export default function ThemeSwitcher({}: Props) {
+  initializeThemeSelector()
+
+  return (
+    <select id="theme-selector">
+      <option value="autonomic">Autonomic</option>
+      <option value="light">Light</option>
+      <option value="dark">Dark</option>
+    </select>
+  )
+}
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@ -0,0 +1,4 @@
+export const getCurrentYear = (): number => {
+  const currentYear = new Date().getFullYear()
+  return currentYear
+}
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@ -0,0 +1,21 @@
+export function switchTheme(themeClass: string): void {
+  const bodyElement = document.body
+  const classesToRemove = ['light', 'dark', 'autonomic']
+
+  bodyElement.classList.remove(...classesToRemove)
+  bodyElement.classList.add(themeClass)
+}
+
+export function handleThemeChange(event: Event): void {
+  const selectElement = event.target as HTMLSelectElement
+  const selectedTheme = selectElement.value
+
+  switchTheme(selectedTheme)
+}
+
+export function initializeThemeSelector(): void {
+  const themeSelector = document.getElementById('theme-selector')
+  if (themeSelector) {
+    themeSelector.addEventListener('change', handleThemeChange)
+  }
+}