Leon-in
97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
import type { Metadata } from "next"
|
|
import Link from "next/link"
|
|
import { notFound } from "next/navigation"
|
|
import { CAREERS } from "@/lib/careers-data"
|
|
|
|
interface Props {
|
|
params: Promise<{ slug: string }>
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
return CAREERS.map((career) => ({ slug: career.slug }))
|
|
}
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { slug } = await params
|
|
const career = CAREERS.find((c) => c.slug === slug)
|
|
if (!career) return { title: "角色未找到" }
|
|
return {
|
|
title: `${career.title} | DAL Code`,
|
|
description: career.description,
|
|
openGraph: {
|
|
title: `${career.title} | DAL Code`,
|
|
description: career.description,
|
|
},
|
|
}
|
|
}
|
|
|
|
export default async function CareerDetailPage({ params }: Props) {
|
|
const { slug } = await params
|
|
const career = CAREERS.find((c) => c.slug === slug)
|
|
if (!career) notFound()
|
|
|
|
return (
|
|
<main>
|
|
<section className="section-small top overflow-hidden">
|
|
<div className="w-layout-blockcontainer container-default w-container">
|
|
<div className="inner-container _650px center">
|
|
<div className="text-center">
|
|
<div className="blog-details-wrapper" style={{ justifyContent: "center" }}>
|
|
<div className="item-details">{career.department}</div>
|
|
<div className="item-details-divider">·</div>
|
|
<div className="item-details">{career.location}</div>
|
|
<div className="item-details-divider">·</div>
|
|
<div className="item-details">{career.type}</div>
|
|
</div>
|
|
<div className="mg-top-4x-extra-small">
|
|
<h1>{career.title}</h1>
|
|
</div>
|
|
<div className="mg-top-4x-extra-small">
|
|
<p>{career.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mg-top-regular">
|
|
<div className="inner-container _650px center">
|
|
<div className="blog-post-rich-text w-richtext">
|
|
<h2>角色概述</h2>
|
|
<p>{career.description}</p>
|
|
<h2>你会负责什么</h2>
|
|
<ul role="list">
|
|
{career.responsibilities.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
<h2>我们希望你具备</h2>
|
|
<ul role="list">
|
|
{career.requirements.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
<h2>我们期待它带来的结果</h2>
|
|
<p>{career.outcome}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mg-top-regular">
|
|
<div className="inner-container _650px center text-center">
|
|
<Link href="/careers" className="primary-button w-inline-block">
|
|
<div className="button-content">
|
|
<div>返回建设方向</div>
|
|
<div className="button-icon-wrapper primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
|
|
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
|
|
</svg>
|
|
<div className="button-icon-bg" />
|
|
<div className="button-icon-bg-inside" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|