Merge pull request #9 from simonyiszk/feature/newsletter-init

Feature/newsletter init

src/app/conferences/page.tsx

@@ -5,7 +5,7 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 export default function Conferences() {
   return (
     <div className='flex flex-col'>
-      <p className='text-4xl font-bold mb-20 text-center'>Tekintsd meg korábbi konferenciáinkat:</p>
+      <h2 className='mb-20 text-center'>Tekintsd meg korábbi konferenciáinkat:</h2>
       <div className='flex justify-between flex-col md:flex-row gap-10'>
         <Link href='https://2023.konferencia.simonyi.bme.hu' target='blank'>
           <div className='flex flex-col justify-center items-center'>

src/app/contact/page.tsx

@@ -3,10 +3,10 @@ import Link from 'next/link';
 export default function Contact() {
   return (
     <div className='flex flex-col'>
-      <p className='text-4xl font-bold mb-20 text-center'>Vállalati és sajtómegkeresések, általános kérdések:</p>
+      <h2 className=' mb-20 text-center'>Vállalati és sajtómegkeresések, általános kérdések:</h2>
       <Link
         href='mailto:[email protected]'
-        className='text-2xl md:text-3xl font-semibold text-center hover:text-brand break-all'
+        className='text-xl sm:text-2xl md:text-3xl font-semibold text-center hover:text-brand'
         target='blank'
       >
         [email protected]

src/app/globals.css

@@ -10,7 +10,11 @@ img {
 }
 
 h1 {
-  @apply text-4xl font-bold;
+  @apply text-3xl sm:text-4xl md:text-5xl font-bold;
+}
+
+h2 {
+  @apply text-2xl sm:text-3xl md:text-4xl font-bold;
 }
 
 .brand-link:hover {

src/components/checkbox.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TbCheck } from 'react-icons/tb';
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ label, className, ...rest }, ref) => {
+  ref = ref as React.MutableRefObject<HTMLInputElement>;
+  const id = rest.id || Math.random().toString(36);
+  return (
+    <label htmlFor={id} className={clsx('gap-3 flex cursor-pointer', className)}>
+      <input id={id} hidden type='checkbox' ref={ref} {...rest} />
+      <div
+        className={clsx('h-5 w-5 flex-shrink-0 border-white border-2 rounded-md flex items-center justify-center', {
+          'bg-white text-black': rest.checked,
+        })}
+      >
+        {rest.checked && <TbCheck />}
+      </div>
+      {label}
+    </label>
+  );
+});

src/components/newsletter/newsletter-modals.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { FaCheckCircle, FaTimes } from 'react-icons/fa';
 
 import { addToGroup } from '@/app/actions';
+import { Checkbox } from '@/components/checkbox';
 
 import { WhiteButton } from '../white-button';
 
@@ -66,16 +67,14 @@ export function NewsletterModals() {
                 hírlevelünkre!
               </p>
               <div>
-                <input
+                <Checkbox
                   className='mr-2'
                   type='checkbox'
                   id='accept'
                   checked={accepted}
+                  label='Beleegyezem, hogy a konferenciáig havonta maximum két emailt fogok kapni az alábbi email címre.'
                   onChange={(e) => setAccepted(e.target.checked)}
                 />
-                <label htmlFor='accept'>
-                  Beleegyezem, hogy a konferenciáig havonta maximum két emailt fogok kapni az alábbi email címre.
-                </label>
               </div>
 
               <input