added all company descriptions and refactored how page pulls from con…

…stants.ts for about page
ucsddesignco · Nov 3, 2024 · 8e1ee48 · 8e1ee48
1 parent 2ac8f0b
commit 8e1ee48
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 70 deletions.
diff --git a/public/images/company-images/deloitte.png b/public/images/company-images/deloitte.png
diff --git a/public/images/company-images/notion.png b/public/images/company-images/notion.png
diff --git a/src/components/About/Companies/Companies.scss b/src/components/About/Companies/Companies.scss
@@ -1,12 +1,13 @@
 .companies-section {
   .title {
-    font-size: 35px;
+    font-size: 30px;
     font-weight: bold;
     fill: white;
   }
   .button-display {
     .svg-button {
       padding: 4px;
+      background-color: black;
       color: white;
       border: 2px solid white;
       border-radius: 4px;
@@ -54,8 +55,22 @@
     padding: 10px;
     font-size: 14px;
     overflow-y: auto;
-    height: 90px;
+    height: 450px;
     box-sizing: border-box;
-    z-index: 1;
+    margin: 2rem 0;
+
+    h3 {
+      font-weight: bold;
+      font-size: 40px;
+    }
+
+    h3,
+    p {
+      margin-top: 1.5rem;
+    }
+
+    p {
+      font-size: 18px;
+    }
   }
 }
diff --git a/src/components/About/Companies/Companies.tsx b/src/components/About/Companies/Companies.tsx
@@ -2,16 +2,32 @@ import { useState } from 'react';
 import './Companies.scss';
 import { companies } from './constants';
 
+interface Dimensions {
+  width: string;
+  height: string;
+}
+
+interface Company {
+  company: string;
+  org_type: string;
+  description: string;
+  companyImage: string;
+  dimensions?: Dimensions;
+}
+
 export default function Companies() {
-  const [selectedButton, setSelectedButton] = useState<string | null>(null);
-  const [selectedCompany, setSelectedCompany] = useState<string>('');
-  const [companyDescription, setCompanyDescription] = useState<string>('');
+  const [selectedButton, setSelectedButton] = useState<string | null>('');
+  const [companyData, setCompanyData] = useState<Company | null>(null);
 
   const handleButtonClick = (company: string | null) => {
     setSelectedButton(company);
-    const companyData = companies.find(obj => obj.company === company);
-    setSelectedCompany(company!);
-    setCompanyDescription(companyData?.description!);
+    const foundCompany = companies.find(obj => obj.company === company);
+
+    if (foundCompany) {
+      setCompanyData(foundCompany);
+    } else {
+      console.error(`Company with name "${company}" not found.`);
+    }
   };
 
   return (
@@ -59,50 +75,26 @@ export default function Companies() {
           fill="#FBFEFC"
           stroke="white"
         />
-        <path
-          d="M801 754.712L809.5 706.212V757.212L801 768.212L809.5 777.712V794.212L790 768.212L801 754.712Z"
-          fill="#FBFEFC"
-          stroke="white"
-        />
-        <path
-          d="M516.067 687.641L548.838 691.038L565.224 692.736L573.416 693.585L578.006 696.208L581.609 694.435L647.4 699.356L714.147 703.12L704.959 785.971L704.066 807.65L703.62 818.49L700.511 820.001L703.396 823.91L703.173 829.33L695.271 941.212L679.284 940.236L673.279 935.921L671.291 939.748L663.297 939.26L631.323 937.307L528.125 926.578L497.365 925.523L498.537 906.078L499.123 896.355L504.134 892.205L499.709 886.633L502.054 847.742L513.509 733.308L516.067 687.641Z"
-          fill="black"
-          stroke="#FBFEFC"
-          strokeWidth="2"
-        />
-        <rect
-          x="526.948"
-          y="699.341"
-          width="175.308"
-          height="184.947"
-          transform="rotate(4.53287 526.948 699.341)"
-          fill="black"
-        />
-        <rect
-          x="526.948"
-          y="699.341"
-          width="175.308"
-          height="184.947"
-          transform="rotate(4.53287 526.948 699.341)"
-          stroke="#FBFEFC"
-          strokeWidth="2"
-        />
-        <path
-          d="M782.97 76.1558L801.695 32.9947C805.938 23.2139 801.434 11.8463 791.643 7.62689V7.62689C781.868 3.41468 770.53 7.92362 766.318 17.6979L706.231 157.128C700.84 169.636 706.61 184.146 719.119 189.536V189.536C731.627 194.927 746.136 189.156 751.527 176.648L802.047 59.4184"
-          stroke="#68DEA3"
-          strokeWidth="2.68804"
-        />
-        <text x="15%" y="10%" className="title">
-          Recruiting
-        </text>
+
+        <foreignObject
+          x="15%"
+          y="7.5%"
+          width="400"
+          height="300"
+          className="title"
+        >
+          <div>
+            <h3 className="title">Recruiting</h3>
+          </div>
+        </foreignObject>
         <g className="button-grid">
           {companies
             .filter(obj => obj.org_type === 'Recruiting')
             .map((obj, index) => (
               <foreignObject
                 key={obj.company}
                 x={125 + (index % 2) * 300}
-                y={120 + Math.floor(index / 2) * 55}
+                y={125 + Math.floor(index / 2) * 55}
                 width={200 + obj.company.length * 2}
                 height="50"
                 className="button-display"
@@ -118,17 +110,19 @@ export default function Companies() {
               </foreignObject>
             ))}
         </g>
-        <text x="15%" y="35%" className="title">
-          Networking Only
-        </text>
+        <foreignObject x="15%" y="30%" width="400" height="300">
+          <div>
+            <h3 className="title">Networking Only</h3>
+          </div>
+        </foreignObject>
         <g className="button-grid">
           {companies
             .filter(obj => obj.org_type === 'Networking Only')
             .map((obj, index) => (
               <foreignObject
                 key={obj.company}
                 x={125 + index * 175}
-                y={375 + Math.floor(index / 2) * 55}
+                y={350 + Math.floor(index / 2) * 55}
                 width={120 + obj.company.length * 5}
                 height="50"
                 className="button-display"
@@ -145,13 +139,64 @@ export default function Companies() {
             ))}
         </g>
         <g>
-          <foreignObject x="15%" y="450" width="70%" height="100">
+          <foreignObject x="15%" y="400" width="70%" height="700">
             <div className="company-description">
-              <p>{selectedCompany}</p>
-              <p>Hello!</p>
+              <h3>{companyData && <p>{companyData.company}</p>}</h3>
+              <p>{companyData && <p>{companyData.description}</p>}</p>
             </div>
           </foreignObject>
         </g>
+        <path
+          d="M801 754.712L809.5 706.212V757.212L801 768.212L809.5 777.712V794.212L790 768.212L801 754.712Z"
+          fill="#FBFEFC"
+          stroke="white"
+        />
+        <path
+          d="M516.067 687.641L548.838 691.038L565.224 692.736L573.416 693.585L578.006 696.208L581.609 694.435L647.4 699.356L714.147 703.12L704.959 785.971L704.066 807.65L703.62 818.49L700.511 820.001L703.396 823.91L703.173 829.33L695.271 941.212L679.284 940.236L673.279 935.921L671.291 939.748L663.297 939.26L631.323 937.307L528.125 926.578L497.365 925.523L498.537 906.078L499.123 896.355L504.134 892.205L499.709 886.633L502.054 847.742L513.509 733.308L516.067 687.641Z"
+          fill="black"
+          stroke="#FBFEFC"
+          strokeWidth="2"
+        />
+        <rect
+          x="526.948"
+          y="699.341"
+          width="175.308"
+          height="184.947"
+          transform="rotate(4.53287 526.948 699.341)"
+          fill="black"
+        />
+        <rect
+          x="526.948"
+          y="699.341"
+          width="175.308"
+          height="184.947"
+          transform="rotate(4.53287 526.948 699.341)"
+          stroke="#FBFEFC"
+          strokeWidth="2"
+        />
+        <path
+          d="M782.97 76.1558L801.695 32.9947C805.938 23.2139 801.434 11.8463 791.643 7.62689V7.62689C781.868 3.41468 770.53 7.92362 766.318 17.6979L706.231 157.128C700.84 169.636 706.61 184.146 719.119 189.536V189.536C731.627 194.927 746.136 189.156 751.527 176.648L802.047 59.4184"
+          stroke="#68DEA3"
+          strokeWidth="2.68804"
+        />
+        {companyData?.companyImage && (
+          <foreignObject
+            x="65%"
+            y="775px"
+            width="25%"
+            height="150px"
+            className="company-image"
+          >
+            <div>
+              <img
+                src={companyData?.companyImage || 'undefined'}
+                alt={companyData?.company || 'Company image'}
+                width="150px"
+                height="50px"
+              />
+            </div>
+          </foreignObject>
+        )}
       </svg>
     </div>
   );

diff --git a/src/components/About/Companies/constants.ts b/src/components/About/Companies/constants.ts
@@ -1,14 +1,65 @@
 export const companies = [
-  { company: 'UCSD Design Lab', org_type: 'Recruiting', description: '' },
-  { company: 'Deloitte', org_type: 'Recruiting' },
+  {
+    company: 'UCSD Design Lab',
+    org_type: 'Recruiting',
+    companyImage: '../company-svgs/',
+    dimensions: { width: '150px', height: '50px' },
+    description:
+      'The UC San Diego Design Lab works on major societal issues, such as large-scale education, automation, healthcare, and the ethical issues that are of ever-increasing importance. For the Design Lab, design is a way of thinking, addressing the core issues, always taking a systems point of view, emphasizing the role of people in the complex systems of the modern world.'
+  },
+  {
+    company: 'Deloitte',
+    org_type: 'Recruiting',
+    companyImage: 'images/company-images/deloitte.png',
+    dimensions: { width: '150px', height: '50px' },
+    description:
+      'With more than 100,000 professionals, Deloitte provides audit and assurance, tax, consulting, and risk and financial advisory services to a broad cross-section of the largest corporations and governmental agencies.'
+  },
   {
     company: 'The Art of Problem Solving',
     org_type: 'Recruiting',
-    description: ''
+    companyImage: './company-svgs/',
+    dimensions: { width: '150px', height: '50px' },
+    description:
+      'Art of Problem Solving is an education technology company inspiring and training the next generation of great problem solvers. They help students develop problem-solving skills by offering resources in a variety of different formats, building a community where students can connect and collaborate with their peers.'
+  },
+  {
+    company: 'San Diego Zoo',
+    org_type: 'Recruiting',
+    companyImage: './company-svgs/',
+    dimensions: { width: '150px', height: '50px' },
+    description:
+      'San Diego Zoo is an international nonprofit conservation leader, committed to inspiring passion for nature and creating a world where all life thrives. Made up of two world-famous facilities, the San Diego Zoo and San Diego Zoo Safari Park— together they give millions of guests, in person and virtually, the opportunity to experience conservation in action.'
   },
-  { company: 'San Diego Zoo', org_type: 'Recruiting', description: '' },
-  { company: 'CoNote', org_type: 'Recruiting', description: '' },
-  { company: 'UCSD Library', org_type: 'Recruiting', description: '' },
-  { company: 'Notion', org_type: 'Networking Only', description: '' },
-  { company: 'UCSD ACM', org_type: 'Networking Only', description: '' }
+  {
+    company: 'CoNote',
+    org_type: 'Recruiting',
+    companyImage: './company-svgs/',
+    dimensions: { width: '150px', height: '50px' },
+    description:
+      'CoNote.ai is a start-up technology that helps researchers transcribe, analyze, and organize their data while collaborating with their team.'
+  },
+  {
+    company: 'UCSD Library',
+    org_type: 'Recruiting',
+    companyImage: './company-svgs/',
+    description:
+      "The UC San Diego Library, one of the nation's top public academic libraries, plays a critical role in advancing and supporting the university's research, teaching, patient care, and public service missions. The Library provides the foundation of knowledge needed to advance cutting-edge discoveries in a wide range of disciplines--from healthcare and science to public policy and the arts. The Library provides access to more than 7 million items, including digital and print volumes, journals, and multimedia materials to meet the knowledge demands of scholars, students, and members of the public."
+  },
+  {
+    company: 'Notion',
+    org_type: 'Networking Only',
+    companyImage: 'images/company-images/notion.png',
+    dimensions: { width: '100px', height: '100px' },
+    description:
+      "Notion blends your everyday work tools into one. Product roadmap? Company wiki? Meeting notes? With Notion, they're all in one place, and totally customizable to meet the needs of any workflow. It's the all-in-one workspace for you, your team, and your whole company."
+  },
+  {
+    company: 'UCSD ACM',
+    org_type: 'Networking Only',
+    companyImage: './company-svgs/',
+    dimensions: { width: '150px', height: '50px' },
+    description:
+      'ACM at UCSD is an inclusive community of students passionate about technology. As UCSD’s largest members-first computing org, they offer workshops, socials, and projects through different communities including AI, Cyber, Hack, and Design.'
+  }
 ];
diff --git a/src/components/About/Opportunities/Opportunities.tsx b/src/components/About/Opportunities/Opportunities.tsx
@@ -45,9 +45,18 @@ export default function Opportunities() {
               strokeWidth="2"
               stroke-linecap="round"
             />
-            <text x="30%" y="50%" fill="white" className="card-text">
-              One-on-Ones
-            </text>
+            <foreignObject
+              x="30%"
+              y="47.5%"
+              width="400"
+              height="300"
+              fill="white"
+              className="card-text"
+            >
+              <div>
+                <p>1:1 Networking</p>
+              </div>
+            </foreignObject>
           </svg>
         </figure>
         <figure className="figure">
@@ -86,9 +95,18 @@ export default function Opportunities() {
               strokeWidth="2"
               stroke-linecap="round"
             />
-            <text x="15%" y="50%" fill="white" className="card-text">
-              Company Info Sessions
-            </text>
+            <foreignObject
+              x="20%"
+              y="47.5%"
+              width="400"
+              height="300"
+              fill="white"
+              className="card-text"
+            >
+              <div>
+                <p>Company Info Sessions</p>
+              </div>
+            </foreignObject>
           </svg>
         </figure>
         <figure className="figure">
@@ -127,9 +145,18 @@ export default function Opportunities() {
               strokeWidth="2"
               stroke-linecap="round"
             />
-            <text x="22.5%" y="50%" fill="white" className="card-text">
-              Resume Reviews
-            </text>
+            <foreignObject
+              x="27.5%"
+              y="47.5%"
+              width="400"
+              height="300"
+              fill="white"
+              className="card-text"
+            >
+              <div>
+                <p>Resume Reviews</p>
+              </div>
+            </foreignObject>
           </svg>
         </figure>
       </div>