feat(projects): add project meta-row component
This commit is contained in:
@@ -144,3 +144,18 @@
|
|||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--color-on-surface-variant, #c5c5d3);
|
color: var(--color-on-surface-variant, #c5c5d3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.meta-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
border-bottom: 1px solid var(--color-outline-variant, #444651);
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-row:last-child { border-bottom: 0; }
|
||||||
|
|
||||||
|
.meta-row__label { color: var(--color-on-surface-variant, #c5c5d3); display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||||
|
.meta-row__value { color: var(--color-on-surface, #e3e1e9); font-weight: 600; }
|
||||||
|
.meta-row__icon { color: var(--color-on-surface-variant, #c5c5d3); }
|
||||||
|
|||||||
@@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Project Meta Row Component
|
||||||
|
*
|
||||||
|
* Renders one row of the Repository Details table on the project detail
|
||||||
|
* page. Expects $label, $value, and $icon (optional decorative SVG) in
|
||||||
|
* scope.
|
||||||
|
*
|
||||||
|
* @package KsPortfolio
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace KsPortfolio;
|
||||||
|
|
||||||
|
if ( ! isset( $label ) || ! isset( $value ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$row_label = (string) $label;
|
||||||
|
$row_value = (string) $value;
|
||||||
|
?>
|
||||||
|
<div class="meta-row">
|
||||||
|
<span class="meta-row__label">
|
||||||
|
<?php if ( isset( $icon ) && $icon ) : ?>
|
||||||
|
<span class="meta-row__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php echo esc_html( $row_label ); ?>
|
||||||
|
</span>
|
||||||
|
<span class="meta-row__value"><?php echo esc_html( $row_value ); ?></span>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user