Change BuildingCard to generic ItemCard
This commit is contained in:
parent
7bd5a055e2
commit
f97d394eb4
|
@ -6,23 +6,25 @@ interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
description: string;
|
description: string;
|
||||||
image: string;
|
image: string;
|
||||||
|
button_type: string;
|
||||||
|
button_name: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
|
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="building-card" data-id={Astro.props.id}>
|
<div class="item-card" data-id={Astro.props.id}>
|
||||||
<img class="building-card-image" src={Astro.props.image} />
|
<img class="item-card-image" src={Astro.props.image} />
|
||||||
<div class="building-card-main-field">
|
<div class="item-card-main-field">
|
||||||
<div class="building-card-name">{Astro.props.name}</div>
|
<div class="item-card-name">{Astro.props.name}</div>
|
||||||
<div class="building-card-description">{Astro.props.description}</div>
|
<div class="item-card-description">{Astro.props.description}</div>
|
||||||
<a id={`build_${Astro.props.id}`} href="#" class="building-card-build">{getName(lang, "general", "nav-build")}</a>
|
<a id={`button_${Astro.props.id}`} href="#" class="item-card-build">{getName(lang, Astro.props.button_type, Astro.props.button_name)}</a>
|
||||||
<div class="building-card-info-button">i</div>
|
<div class="item-card-info-button">i</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.building-card {
|
.item-card {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333;
|
color: #333;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
@ -35,11 +37,11 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
||||||
width: 49%;
|
width: 49%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-card-expanded {
|
.item-card-expanded {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-card-image {
|
.item-card-image {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
|
@ -47,7 +49,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-card-main-field {
|
.item-card-main-field {
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
|
@ -56,17 +58,17 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
||||||
padding-right: 100px;
|
padding-right: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-card-name {
|
.item-card-name {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-card-description {
|
.item-card-description {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-card-build {
|
.item-card-build {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
@ -78,7 +80,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
||||||
right: 16px;
|
right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.building-card-info-button {
|
.item-card-info-button {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
import Layout from '../../layouts/Layout.astro';
|
import Layout from '../../layouts/Layout.astro';
|
||||||
import NavBar from '../../components/NavBar.astro';
|
import NavBar from '../../components/NavBar.astro';
|
||||||
import BuildingCard from '../../components/BuildingCard.astro';
|
import BuildingCard from '../../components/ItemCard.astro';
|
||||||
import { getUserByAccessToken } from '../../lib/db/users';
|
import { getUserByAccessToken } from '../../lib/db/users';
|
||||||
import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
|
import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
|
||||||
import ResourceBar from '../../components/ResourceBar.astro';
|
import ResourceBar from '../../components/ResourceBar.astro';
|
||||||
|
@ -62,7 +62,9 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: DBBuildi
|
||||||
id={building.id}
|
id={building.id}
|
||||||
name={getObj(lang, "buildings", building.id).name}
|
name={getObj(lang, "buildings", building.id).name}
|
||||||
description={getObj(lang, "buildings", building.id).description ?? ""}
|
description={getObj(lang, "buildings", building.id).description ?? ""}
|
||||||
image={`/images/buildings/${building.id}.jpeg`} />
|
image={`/images/buildings/${building.id}.jpeg`}
|
||||||
|
button_type="general"
|
||||||
|
button_name="nav-build" />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>)}
|
</>)}
|
||||||
|
|
Loading…
Reference in New Issue