Merge pull request #13 from cis3296f22/BillboardDesign

Prototype billboard listing design
cis3296f22 · Nov 4, 2022 · 9e7b46a · 9e7b46a
2 parents eec87d4 + ce7b12b
commit 9e7b46a
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 0 deletions.
diff --git a/components/Billboard.module.css b/components/Billboard.module.css
@@ -0,0 +1,36 @@
+.billboardContainer {
+  width: fit-content;
+  height: 100px;
+  background-color: dimgray;
+  display: flex;
+  border-radius: 20px;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  margin: 20px;
+  padding: 10px;
+}
+
+.billboardImage {
+  width: 144px;
+  height: 100%;
+  border-radius: 20px;
+}
+
+.descriptionContainer {
+  margin-left: 10px;
+  padding-left: 0px;
+  height: fit-content;
+  width: auto;
+}
+
+.selectButton {
+  margin-left: 10px;
+  padding: 10px;
+  border-radius: 10px;
+  width: fit-content;
+  height: 50px;
+  background-color: green;
+  display: flex;
+  align-items: center;
+}
diff --git a/components/Billboard.tsx b/components/Billboard.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import styles from './Billboard.module.css'
+
+type BillboardProps = {
+  imgSrc: string,
+  size: String,
+  rate: String,
+  location: String
+}
+
+function Billboard({imgSrc, size, rate, location}: BillboardProps) {
+
+  return (
+    <div className={styles.billboardContainer}>
+      <img className={styles.billboardImage} src={imgSrc}></img>
+      <div className={styles.descriptionContainer}>
+        <b> {size} </b> <br/>
+        { rate } <br/>
+        <i> {location} </i>
+      </div>
+      <div className={styles.selectButton}>
+        Select
+      </div>
+    </div>
+  )
+}
+
+export default Billboard;
diff --git a/config/firebase.tsx b/config/firebase.tsx
@@ -0,0 +1,25 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp, getApps, FirebaseApp } from "firebase/app";
+import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBO1oMRX3gLwkZ0WOEJ40Qb10ef35olw9M",
+  authDomain: "billboard-755fe.firebaseapp.com",
+  projectId: "billboard-755fe",
+  storageBucket: "billboard-755fe.appspot.com",
+  messagingSenderId: "567493408957",
+  appId: "1:567493408957:web:40b9dff7bbdb90ba229fd4"
+}; 
+
+// Initialize Firebase
+let app: FirebaseApp | undefined;
+if (!getApps().length) {
+  app = initializeApp(firebaseConfig);
+}
+export { getAuth }
+export { createUserWithEmailAndPassword }
+export { signInWithEmailAndPassword }
+export { app }
diff --git a/pages/test.tsx b/pages/test.tsx
@@ -0,0 +1,35 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import React from 'react'
+import Link from 'next/link'
+import Header from '../components/Header'
+import Billboard from '../components/Billboard'
+
+export default function Test() {
+  return (
+    <div>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Billboard  imgSrc="https://media.kvue.com/assets/KVUE/images/e0645154-1d75-43c5-b2f5-ff15215f1bff/e0645154-1d75-43c5-b2f5-ff15215f1bff_1140x641.jpg"
+                  size="100 ft x 20 ft"
+                  rate="$20 per hour"
+                  location="Phoenix, AZ"/>
+      <Billboard  imgSrc="https://movia.wpengine.com/wp-content/uploads/2020/04/billboard-2.jpg"
+                  size="90 ft x 20 ft"
+                  rate="$20 per hour"
+                  location="Albuquerque, NM"/>
+      <Billboard  imgSrc="https://pshspawprint.com/wp-content/uploads/2018/02/tvvvvvvvv-900x618.jpg"
+                  size="30 in x 17 in"
+                  rate="$20 per hour"
+                  location="Stonesthrow Elementary"/>
+      <Billboard  imgSrc="https://i2.wp.com/articles.itsrelevant.com/wp-content/uploads/2016/08/Medical-Waiting-Room-TV-Doctors-Express-Television.jpg?fit=1500%2C847&ssl=1"
+                  size="40 in x 22.5 in"
+                  rate="$20 per hour"
+                  location="Doctor's Office"/>
+    </div>
+  )
+}