discourse/app/assets/javascripts/admin/addon/components/admin-section-landing-item.gjs
Martin Brennan 8fc34e9323
DEV: Add a skeleton for section landing page & items (#28477)
We are going to start making section landing pages
for admin for each sidebar section. This lays the framework
with routes and simple components that can be further
refined by a designer, but I have taken the base CSS from
AI which Kris made.

The initial section landing items will be used in AI to replace
the placeholders added in this commit b8b3c61451
2024-10-02 12:19:38 +10:00

78 lines
2.2 KiB
Plaintext

import Component from "@glimmer/component";
import { hash } from "@ember/helper";
import { LinkTo } from "@ember/routing";
import concatClass from "discourse/helpers/concat-class";
import dIcon from "discourse-common/helpers/d-icon";
import i18n from "discourse-common/helpers/i18n";
import {
DangerButton,
DefaultButton,
PrimaryButton,
} from "admin/components/admin-page-action-button";
export default class AdminSectionLandingItem extends Component {
get title() {
if (this.args.titleLabelTranslated) {
return this.args.titleLabelTranslated;
} else if (this.args.titleLabel) {
return i18n(this.args.titleLabel);
}
}
get description() {
if (this.args.descriptionLabelTranslated) {
return this.args.descriptionLabelTranslated;
} else if (this.args.descriptionLabel) {
return i18n(this.args.descriptionLabel);
}
}
get tagline() {
if (this.args.taglineLabelTranslated) {
return this.args.taglineLabelTranslated;
} else if (this.args.taglineLabel) {
return i18n(this.args.taglineLabel);
}
}
<template>
<div
class={{concatClass "admin-section-landing-item" (if @icon "-has-icon")}}
...attributes
>
{{#if @imageUrl}}
<img class="admin-section-landing-item__image" src={{@imageUrl}} />
{{/if}}
{{#if @icon}}
<div class="admin-section-landing-item__icon">
{{dIcon @icon}}
</div>
{{/if}}
<div class="admin-section-landing-item__content">
{{#if this.tagline}}
<h4 class="admin-section-landing-item__tagline">{{this.tagline}}</h4>
{{/if}}
{{#if @titleRoute}}
<LinkTo @route={{@titleRoute}}><h3
class="admin-section-landing-item__title"
>{{this.title}}</h3></LinkTo>
{{else}}
<h3 class="admin-section-landing-item__title">{{this.title}}</h3>
{{/if}}
<p
class="admin-section-landing-item__description"
>{{this.description}}</p>
</div>
<div class="admin-section-landing-item__buttons">
{{yield
(hash Primary=PrimaryButton Default=DefaultButton Danger=DangerButton)
to="buttons"
}}
</div>
</div>
</template>
}