feat: new profile view, added interactive rendering data selector and…

… photo grid
dlv237 · Jul 6, 2024 · 7c68ba1 · 7c68ba1
1 parent c251f2c
commit 7c68ba1
Show file tree

Hide file tree

Showing 9 changed files with 412 additions and 13 deletions.
diff --git a/my-app/src/app/globals.css b/my-app/src/app/globals.css
@@ -86,15 +86,6 @@ body {
   max-width: 30vh;
 }
 
-.profileContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 50%;
-  margin-top: 10vh;
-  margin-bottom: 20vh;
-}
 
 .formContainer {
   display: flex;

diff --git a/my-app/src/app/profile.css b/my-app/src/app/profile.css
@@ -0,0 +1,172 @@
+.profileImageGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    min-width: max-content;
+    margin-top: 20px;
+    grid-gap: 1px;
+}
+
+.architectImage {
+    width: 16vh;
+    height: 16vh;
+    object-fit: cover;
+    border-radius: 1px;
+}
+
+
+.profileName {
+    font-weight: bold;
+    font-size: 1.25rem;
+}
+
+.profileDataContainer {
+    display: flex;
+}
+
+.profileDataType {
+    font-size: 1rem;
+    margin-right: 10px;
+    margin: 0.25rem;
+    font-weight: bold;
+}
+
+.profileData {
+    margin-left: auto;
+    font-size: 1rem;
+    margin: 0.25rem;
+}
+
+.dataContainer {
+    align-content: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.dataContainerVertical {
+    align-content: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: -webkit-fill-available;
+    justify-content: space-around;
+}
+
+.profileDataContainerVertical {
+    display: flex;
+    flex-direction: column;
+}
+
+.architectName {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+
+.tabContainer {
+    display: flex;
+    position: relative;
+    justify-content: space-around;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+}
+
+.tab {
+    flex: 1;
+    text-align: center;
+    cursor: pointer;
+    padding: 1rem;
+    font-size: 1rem;
+    position: relative;
+}
+
+.tabIndicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 33.33%;
+    height: 4px;
+    background-color: #000;
+    transition: left 0.3s ease;
+}
+
+.tabContent {
+    margin-top: 1rem;
+    width: -webkit-fill-available;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: center;
+}
+
+.profileContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 50%;
+    margin-top: 4vh;
+    margin-bottom: 20vh;
+  }
+
+.profileImageGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    min-width: max-content;
+    margin-top: 20px;
+    grid-gap: 1px;
+}
+
+.architectImage {
+    width: 16vh;
+    height: 16vh;
+    object-fit: cover;
+    border-radius: 1px;
+}
+
+.profileName {
+    font-weight: bold;
+    font-size: 1.25rem;
+}
+
+.profileDataContainer {
+    display: flex;
+}
+
+.profileDataType {
+    font-size: 1rem;
+    margin-right: 10px;
+    margin: 0.25rem;
+}
+
+.profileData {
+    margin-left: auto;
+    font-size: 1rem;
+    margin: 0.25rem;
+}
+
+.dataContainer {
+    align-content: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.dataContainerVertical {
+    align-content: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: -webkit-fill-available;
+    justify-content: space-around;
+}
+
+.profileDataContainerVertical {
+    display: flex;
+    flex-direction: column;
+}
+
+.architectName {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
diff --git a/my-app/src/components/form/file_form.tsx b/my-app/src/components/form/file_form.tsx
@@ -70,7 +70,7 @@ const FileForm = forwardRef(({ onNext, onBack }: { onNext: () => void, onBack: (
 
     const uploadFile = async (file: File): Promise<FileData> => {
         const compressedFile = await imageCompression(file, {
-            maxSizeMB: 1,
+            maxSizeMB: 5,
             useWebWorker: true,
         });
 

diff --git a/my-app/src/components/profile/contact.tsx b/my-app/src/components/profile/contact.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+type ArchitectData = {
+    id: number;
+    email: string;
+    phone: string;
+    name: string;
+    city: string;
+    address: string;
+    website: string;
+    experience_id: number;
+}
+
+export default function Contact({ architect }: { architect: ArchitectData }) {
+    return (
+        <div className="dataContainer">
+            <div className="profileDataContainer">
+                {architect.phone?.length > 0 ? (
+                    <><h2 className="profileDataType">
+                            <li typeof="disc">Teléfono:</li>
+                        </h2>
+                        <h2 className="profileData">
+                            {architect.phone}
+                        </h2></>
+                ) : null}
+            </div>
+            <div className="profileDataContainer">
+                {architect.email?.length > 0 ? (
+                    <><h2 className="profileDataType">
+                            <li typeof="disc">Correo:</li>
+                        </h2>
+                        <h2 className="profileData">
+                            {architect.email}
+                        </h2></>
+                ) : null}
+            </div>
+            <div className="profileDataContainer">
+                {architect.website?.length > 0 ? (
+                    <><h2 className="profileDataType">
+                            <li typeof="disc">Sitio Web:</li>
+                        </h2>
+                        <h2 className="profileData">
+                            {architect.website}
+                        </h2></>
+                ) : null}
+            </div>
+        </div>
+    );
+}
diff --git a/my-app/src/components/profile/experience.tsx b/my-app/src/components/profile/experience.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+
+type ArchitectData = {
+    id: number;
+    email: string;
+    phone: string;
+    name: string;
+    city: string;
+    address: string;
+    website: string;
+    experience_id: number;
+}
+
+type ScaleData = {
+    scale_id: number;
+    architect_id: number;
+}
+
+export default function Experience({ architect, architectScales }: { architect: ArchitectData, architectScales: ScaleData[] }) {
+    const scaleDict = [
+        { id: 1, name: "baja" },
+        { id: 2, name: "media baja" },
+        { id: 3, name: "media" },
+        { id: 4, name: "media alta" },
+        { id: 5, name: "gran" }
+    ];
+
+    const experienceDict = [
+        { id: 1, name: "empezando" },
+        { id: 2, name: "1-5 años" },
+        { id: 3, name: "5-10 años" },
+        { id: 4, name: "+10 años" },
+    ];
+
+    if (!architect) {
+        return null;
+    }
+
+    return (
+        <div className="dataContainerVertical">
+            <div className="profileDataContainerVertical">
+                <h2 className="profileDataType" style={{ marginBottom: "10px" }}>
+                    Experiencia:
+                </h2>
+                <h2 className="profileData">
+                    {experienceDict.find((exp) => exp.id === architect.experience_id)?.name}
+                </h2>
+            </div>
+            <div className="profileDataContainerVertical">
+                <h2 className="profileDataType" style={{ marginBottom: "10px" }}>
+                    Escalas:
+                </h2>
+                <div className="profileData">
+                    {architectScales.map((scale: ScaleData) => (
+                        <p key={scale.scale_id}>{scaleDict.find((scl) => scl.id === scale.scale_id)?.name}</p>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/my-app/src/components/profile/location.tsx b/my-app/src/components/profile/location.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+type ArchitectData = {
+    id: number;
+    email: string;
+    phone: string;
+    name: string;
+    city: string;
+    address: string;
+    website: string;
+    experience_id: number;
+}
+
+export default function Location({ architect }: { architect: ArchitectData }) {
+    return (
+        <div className="dataContainer">
+            <div className="profileDataContainer">
+                {architect.city?.length > 0 ? (
+                    <><h2 className="profileDataType">
+                            <li typeof="disc">Region:</li>
+                        </h2>
+                        <h2 className="profileData">
+                            {architect.city}
+                        </h2></>
+                ) : null}
+            </div>
+            <div className="profileDataContainer">
+                {architect.address?.length > 0 ? (
+                    <><h2 className="profileDataType">
+                            <li typeof="disc">Dirección:</li>
+                        </h2>
+                        <h2 className="profileData">
+                            {architect.address}
+                        </h2></>
+                ) : null}
+            </div>
+        </div>
+    );
+}
diff --git a/my-app/src/pages/_app.tsx b/my-app/src/pages/_app.tsx
@@ -9,6 +9,7 @@ import {
 import '../app/globals.css'
 import '../app/styles.css'
 import '../app/cards.css'
+import '../app/profile.css'
 import type { AppProps } from 'next/app'
 
 function MyApp({ Component, pageProps }: AppProps) {