NextJS starter code w/ dependencies, images, starter components

Author: Callum McIntyre

.gitignore

@@ -29,6 +29,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+env.bat
 
 # vercel
 .vercel

components/footer.js

@@ -0,0 +1,15 @@
+export default function Footer() {
+  return (
+    <footer className='mx-auto mt-48 text-center'>
+      <a
+        href='https://www.pointer.gg?utm_source=stackblitz-solidity'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        Learn web3 dev and earn crypto rewards at{" "}
+        <span className=''>Pointer</span>
+      </a>
+      <p>Art from Joanne Li @joanne on Figma <a href='keeybs.com' className='underline'>keeybs.com</a> <a href='https://creativecommons.org/licenses/by/4.0/' className="underline">CC 4.0</a></p>
+    </footer>
+  )
+}

components/keyboard.js

@@ -0,0 +1,18 @@
+export default function Keyboard({kind, isPBT, filter}) {
+  const kindDir = {
+    0: 'sixty-percent',
+    1: 'seventy-five-percent',
+    2: 'eighty-percent',
+    3: 'iso-105',
+  }[kind]
+
+  const fileName = isPBT ? 'PBT' : 'ABS'
+
+  const imagePath = `keyboards/${kindDir}/${fileName}.png`;
+  const alt = `${kindDir} keyboard with ${isPBT? "PBT" : "ABS"} keys ${filter? `with ${filter}` : ""}`;
+
+  return (
+    <div className="rounded-lg p-2 border border-white">
+      <img className={"h-[230px] w-[360px] " + filter} src={imagePath} alt={alt} />
+    </div>
+  )}

components/primary-button.js

@@ -0,0 +1,11 @@
+export default function PrimaryButton(props) {
+
+  const { type, children, ...rest } = props
+  const className="max-w-fit inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-80 disabled:pointer-events-none"
+
+  if(type === "link") {
+    return <a {...rest} className={className}>{children}</a>
+  } else {
+    return <button {...rest} className={className}>{children}</button>
+  }
+}

components/secondary-button.js

@@ -0,0 +1,6 @@
+export default function SecondaryButton(props) {
+  return <button
+    {...props}
+    className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-80 disabled:pointer-events-none"
+  >{props.children}</button>
+}