141 lines
4.5 KiB
Swift
141 lines
4.5 KiB
Swift
import Elementary
|
|
|
|
/// The site footer: the about blurb, the link columns, the language toggle, and the legal line.
|
|
struct SiteFooter: HTML {
|
|
|
|
// MARK: Computed
|
|
|
|
var body: some HTML {
|
|
footer(.class("site-footer")) {
|
|
div(.class("site-footer__inner")) {
|
|
div(.class("site-footer__columns")) {
|
|
div(.class("site-footer__about")) {
|
|
span(.class("site-footer__wordmark")) {
|
|
"CCN"
|
|
}
|
|
p {
|
|
"A marketplace for single-issue comics, manga, trade paperbacks and hardcovers, sold by independent shops in the Netherlands and across the EU."
|
|
}
|
|
}
|
|
for column in Self.columns {
|
|
nav(
|
|
.class("site-footer__column"),
|
|
.custom(
|
|
name: "aria-label",
|
|
value: column.title
|
|
)
|
|
) {
|
|
h2(.class("site-footer__heading")) {
|
|
column.title
|
|
}
|
|
ul(.class("site-footer__links")) {
|
|
for link in column.links {
|
|
li {
|
|
a(.href(link.path)) {
|
|
link.label
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
language
|
|
}
|
|
div(.class("site-footer__legal")) {
|
|
span {
|
|
"CCN B.V. · Amsterdam · KvK [NUMBER] · BTW-id [NUMBER] · Business sellers show their KvK number on their shop page; consumers have a 14-day right of withdrawal on purchases from business sellers."
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// MARK: - Helpers
|
|
|
|
private extension SiteFooter {
|
|
|
|
// MARK: Type aliases
|
|
|
|
/// A titled column of links.
|
|
typealias Column = (title: String, links: [(label: String, path: String)])
|
|
|
|
// MARK: Constants
|
|
|
|
/// The link columns, in reading order.
|
|
static let columns: [Column] = [
|
|
(
|
|
title: "Browse",
|
|
links: Format.allCases.map { ($0.label, $0.path) } + [
|
|
("By series", .Route.series)
|
|
]
|
|
),
|
|
(
|
|
title: "Sell",
|
|
links: [
|
|
("Open a shop", .Route.openShop),
|
|
("Seller dashboard", .Route.sellerDashboard),
|
|
("Grading guide", .Route.gradingGuide),
|
|
]
|
|
),
|
|
(
|
|
title: "Account",
|
|
links: [
|
|
("Sign in or join", .Route.signIn),
|
|
("Want list & alerts", .Route.wants),
|
|
("Messages", .Route.messages),
|
|
("Passkeys & settings", .Route.account),
|
|
]
|
|
),
|
|
]
|
|
|
|
// MARK: Computed
|
|
|
|
/// The language toggle; display-only while the prototype serves English alone.
|
|
var language: some HTML {
|
|
div(.class("site-footer__column site-footer__language")) {
|
|
h2(.class("site-footer__heading")) {
|
|
"Language"
|
|
}
|
|
div(
|
|
.class("language-toggle"),
|
|
.custom(
|
|
name: "role",
|
|
value: "group"
|
|
),
|
|
.custom(
|
|
name: "aria-label",
|
|
value: "Language"
|
|
)
|
|
) {
|
|
button(
|
|
.class("language-toggle__option"),
|
|
.type(.button),
|
|
.custom(
|
|
name: "aria-pressed",
|
|
value: "false"
|
|
),
|
|
.disabled
|
|
) {
|
|
"NL"
|
|
}
|
|
button(
|
|
.class("language-toggle__option"),
|
|
.type(.button),
|
|
.custom(
|
|
name: "aria-pressed",
|
|
value: "true"
|
|
)
|
|
) {
|
|
"EN"
|
|
}
|
|
}
|
|
span(.class("site-footer__note")) {
|
|
"Prices in € · ships to NL"
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|