Create JobSection

components/JobSection/index.scss

@@ -0,0 +1,44 @@
+#Job {
+    display: flex;
+    margin-bottom: $unit * 3;
+
+    select {
+        flex-grow: 1;
+        width: auto;
+    }
+
+    .JobImage {
+        $height: 249px;
+        $width: 447px;
+
+        background: url('/images/background_a.jpg');
+        background-size: 500px 281px;
+        border-radius: $unit;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+        display: block;
+        flex-grow: 2;
+        height: $height;
+        margin-right: $unit * 3;
+        max-height: $height;
+        max-width: $width;
+        overflow: hidden;
+        position: relative;
+        width: $width;
+        transition: box-shadow 0.15s ease-in-out;
+
+        img {
+            position: relative;
+            top: $unit * -4;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100%;
+            z-index: 2;
+        }
+
+        .Overlay {
+            background: rgba(255, 255, 255, 0.12);
+            position: absolute;
+            z-index: 1;
+        }
+    }
+}

components/JobSection/index.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react'
+import { useSnapshot } from 'valtio'
+
+import JobDropdown from '~components/JobDropdown'
+
+import { appState } from '~utils/appState'
+
+import './index.scss'
+
+// Props
+interface Props {
+    currentJob?: string
+}
+
+const JobSection = (props: Props) => {
+    const [job, setJob] = useState<Job>()
+    const [imageUrl, setImageUrl] = useState('')
+
+    const { party } = useSnapshot(appState)
+
+    useEffect(() => {
+        // Set current job based on ID
+        setJob(party.job)
+    }, [])
+
+    useEffect(() => {
+        generateImageUrl()
+    })
+
+    useEffect(() => {
+        if (job)
+            appState.party.job = job
+    }, [job])
+
+    function receiveJob(job?: Job) {
+        setJob(job)
+    }
+
+    function generateImageUrl() {
+        let imgSrc = ""
+        
+        if (job) {
+            const slug = job?.name.en.replaceAll(' ', '-').toLowerCase()
+            const gender = (true) ? 'a' : 'b'
+
+            imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/jobs/${slug}_${gender}.png`
+        }
+
+        setImageUrl(imgSrc)
+    }
+
+    // Render: JSX components
+    return (
+        <section id="Job">
+            <div className="JobImage">
+                <img src={imageUrl} />
+                <div className="Overlay" />
+            </div>
+            <JobDropdown 
+                currentJob={party.job.id}
+                onChange={receiveJob} 
+            />
+        </section>
+    )
+}
+
+export default JobSection