diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss index e4108c84..4d5bd3df 100644 --- a/components/GridRep/index.scss +++ b/components/GridRep/index.scss @@ -139,9 +139,25 @@ } .Properties { + .auto { + display: inline-flex; + gap: $unit-half; + flex-direction: row; + margin-left: $unit-half; + } + .full_auto { color: var(--full-auto-label-text); } + + .auto_guard { + width: 12px; + height: 12px; + + svg { + fill: var(--full-auto-label-text); + } + } } .raid { diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx index 607c41f5..f2b17fac 100644 --- a/components/GridRep/index.tsx +++ b/components/GridRep/index.tsx @@ -12,7 +12,7 @@ import { formatTimeAgo } from '~utils/timeAgo' import Button from '~components/Button' import SaveIcon from '~public/icons/Save.svg' - +import ShieldIcon from '~public/icons/Shield.svg' import './index.scss' interface Props { @@ -23,6 +23,7 @@ interface Props { grid: GridWeapon[] user?: User fullAuto: boolean + autoGuard: boolean favorited: boolean createdAt: Date displayUser?: boolean | false @@ -171,6 +172,26 @@ const GridRep = (props: Props) => { ) + function fullAutoString() { + const fullAutoElement = ( + + {` · ${t('party.details.labels.full_auto')}`} + + ) + + const autoGuardElement = ( + + + + ) + + return ( +
+ {fullAutoElement} + {props.autoGuard ? autoGuardElement : ''} +
+ ) + } const details = (

{props.name ? props.name : t('no_title')}

@@ -179,13 +200,7 @@ const GridRep = (props: Props) => { {props.raid ? props.raid.name[locale] : t('no_raid')} - {props.fullAuto ? ( - - {` · ${t('party.details.labels.full_auto')}`} - - ) : ( - '' - )} + {props.fullAuto ? fullAutoString() : ''}