From 2b0e6f61cbd5822f1fc5eb6ce1c3af2a9d02a1b4 Mon Sep 17 00:00:00 2001 From: LimesKey Date: Mon, 16 Dec 2024 17:39:40 -0500 Subject: [PATCH 1/2] slighty better for mobile, and has better styling, but needs work --- app/components/3box.tsx | 228 +- app/components/FAQcard.tsx | 22 +- app/components/dropdown.tsx | 92 +- app/components/footer.tsx | 54 +- app/components/mdx.tsx | 43 +- app/components/middle.tsx | 50 + app/components/top.tsx | 161 +- app/page.tsx | 211 +- pnpm-lock.yaml | 5295 +++++++++++++++++++++++++++++++++++ 9 files changed, 5708 insertions(+), 448 deletions(-) create mode 100644 pnpm-lock.yaml diff --git a/app/components/3box.tsx b/app/components/3box.tsx index 8461815..562ed8f 100644 --- a/app/components/3box.tsx +++ b/app/components/3box.tsx @@ -1,109 +1,127 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; +import { Box, Image, Grid, Heading, Text } from 'theme-ui'; const Threebox = () => { - return( - - - Design a PCB - - - - - Design Art - - - - Create Firmware - - - - ) + return ( + + + Design a PCB + + Create your own PCB design and bring it to life! + + + Design Art + + Create stunning art for your PCB design! + + + Create Firmware + + Develop firmware to control your PCB! + + + ) } export default Threebox; \ No newline at end of file diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx index 02a4ec7..9c57ec2 100644 --- a/app/components/FAQcard.tsx +++ b/app/components/FAQcard.tsx @@ -1,23 +1,20 @@ -import { kMaxLength } from 'buffer'; import React from 'react'; -import { Box } from 'theme-ui'; -// Define the type for the props +import { Box, Heading, Text } from 'theme-ui'; + interface CardProps { question: string; answer: string; } -// Create the component const FAQcard: React.FC = ({ question, answer }) => { return ( -

{question}

-

{answer}

+ {question} + {answer} ); }; -// Inline styles for the component const styles = { card: { borderRadius: '20px', @@ -25,25 +22,24 @@ const styles = { margin: '16px', backgroundColor: 'rgba(201, 227, 255, 0.73)', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', - height: ['fill-content', '16vw'], - width: ['60vw', '26vw'], + width: ['90vw', '60vw', '26vw'], border: '5px solid rgba(39, 114, 193, 0.42)', overflow: 'hidden', }, question: { - fontSize: 'calc(1.2vw + 1.2vh)', + fontSize: ['1.2rem', 'calc(1.2vw + 1.2vh)'], fontWeight: 790, color: '#FFFFFF', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', paddingLeft: '2%', }, answer: { - fontSize: 'calc(0.6vw + 0.6vh)', + fontSize: ['1rem', 'calc(0.6vw + 0.6vh)'], color: '#003180', - marginTop: '8px', + marginTop: '15px', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', fontWeight: 600, - paddingLeft: '2%' + paddingLeft: '2%', }, }; diff --git a/app/components/dropdown.tsx b/app/components/dropdown.tsx index 6e8cd1f..ba42682 100644 --- a/app/components/dropdown.tsx +++ b/app/components/dropdown.tsx @@ -1,76 +1,42 @@ -/** @jsxImportSource theme-ui */ -import { useState } from 'react'; +import React, { useState } from 'react'; -const FAQItem = ({ question, answer }) => { +interface DropdownProps { + label: string; + options: string[]; +} + +const Dropdown: React.FC = ({ label, options }) => { const [isOpen, setIsOpen] = useState(false); return ( -
- + {isOpen && ( -

- {answer} -

+
+
+ {options.map((option, index) => ( + + ))} +
+
)}
); }; -const FAQ = ({ items }) => { - return ( -
- {items.map((item, index) => ( - - ))} -
- ); -}; - -export default FAQ; +export default Dropdown; diff --git a/app/components/footer.tsx b/app/components/footer.tsx index afca7d9..a091229 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -1,31 +1,27 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; +import { Box, Text } from 'theme-ui'; - const footer = ()=> { - return ( -
- Made with ❤️ by @bright li & @Scott -
- ) +const Footer = () => { + return ( + + Made with ❤️ by @bright li & @Scott + + ); } -export default footer; \ No newline at end of file + +export default Footer; \ No newline at end of file diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx index 640c043..1cb4bd2 100644 --- a/app/components/mdx.tsx +++ b/app/components/mdx.tsx @@ -1,18 +1,33 @@ import { Heading, Text } from 'theme-ui' + const components = { - h1: (props) => , - h2: (props) => , - h3: (props) => , - p: (props) => , - ol: (props) =>
    , - li: (props) =>
  1. , - a: (props) => , - + h1: (props) => , + h2: (props) => , + h3: (props) => , + p: (props) => , + ol: (props) =>
      , + li: (props) =>
    1. , + a: (props) => , } + export default components \ No newline at end of file diff --git a/app/components/middle.tsx b/app/components/middle.tsx index e69de29..0320d8e 100644 --- a/app/components/middle.tsx +++ b/app/components/middle.tsx @@ -0,0 +1,50 @@ +import { + Box, + Heading, + Text, + } from 'theme-ui'; + + const Middle = () => { + return ( + + + At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts! + + + Frequently Asked Questions + + + ); + } + + export default Middle; \ No newline at end of file diff --git a/app/components/top.tsx b/app/components/top.tsx index ce10216..71d8a09 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -1,106 +1,79 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; - import dynamic from 'next/dynamic'; +import { Box, Button, Heading } from 'theme-ui'; +import dynamic from 'next/dynamic'; - const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); +const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); - const tipitytopity = ()=> { - return ( - { + return ( + + {typeof window !== 'undefined' && } + - - {typeof window !== 'undefined' && } - {/* - Example PCB! */} - + - - Hacky Holidays! - - - Design a PCB holiday decoration this winter, get one shipped! - - - - - - - - - - - ) + + + + ); } + export default tipitytopity; \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 98ca6d1..55ea7cd 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,33 +1,18 @@ "use client"; - /* eslint-disable @typescript-eslint/no-unused-vars */ import { keyframes } from '@emotion/react'; import Snowfall from 'react-snowfall'; -// import '@google/model-viewer'; -// import Script from 'next/script'; import { useEffect } from 'react'; -// import { tipitytopity } from './components/top' -// import Image from "next/image"; -import { - Box, - Button, - Container, - Image, - Grid, - Heading, - Text, -} from 'theme-ui'; -const Footer = dynamic(() => import('./components/footer'), { ssr: false }); - +import { Box, Image, Heading, Grid } from 'theme-ui'; import dynamic from 'next/dynamic'; + +const Footer = dynamic(() => import('./components/footer'), { ssr: false }); const Top = dynamic(() => import('./components/top'), { ssr: false }); -const FAQcard = dynamic(() => import('./components/FAQcard'), {ssr: false}); +const FAQcard = dynamic(() => import('./components/FAQcard'), { ssr: false }); const ThreeGrid = dynamic(() => import('./components/3box'), { ssr: false }); -// const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); -const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); -const fall = ( rotationDirection: number) => keyframes` +const fall = (rotationDirection: number) => keyframes` from { transform: translateY(-10%) rotate(0deg); } @@ -42,134 +27,100 @@ export default function Home() { import('@google/model-viewer'); } }, []); - return ( - - - - - - + return ( + + + + + - - - - - - - - - - - - + - - - -

      - Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th! - Once your PR gets approved, you will get your PCB decoration just in time for the holidays!🎄 - - - - At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts!



      - FAQ:       - - + height: ['auto', '100vh'], + mt: '4vh', +}}> +

      + Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th! + Once your PR gets approved, you will get your PCB decoration just in time for the holidays!🎄 + + + + At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts! + + Frequently Asked Questions + + + - Any more questions? Ask in #hacky-holidays! + + Any more questions? Ask in #hacky-holidays! -       -       -
      +       +       +