31 lines
791 B
TypeScript
31 lines
791 B
TypeScript
import React from "react";
|
|
import { Language } from "src/types/collections";
|
|
import { isDefined } from "src/utils/asserts";
|
|
import { formatLanguageCode, shortenEllipsis } from "src/utils/string";
|
|
import styled from "styled-components";
|
|
|
|
interface Props {
|
|
language?: Language | string;
|
|
title?: string;
|
|
}
|
|
|
|
const Container = styled.div`
|
|
display: flex;
|
|
place-items: center;
|
|
gap: 10px;
|
|
`;
|
|
|
|
const Title = styled.div`
|
|
font-weight: 600;
|
|
font-size: 1.2rem;
|
|
`;
|
|
|
|
export const RowLabel = ({ language, title }: Props): JSX.Element => (
|
|
<Container>
|
|
{isDefined(language) && typeof language === "string" && (
|
|
<div className="pill pill--style-white">{formatLanguageCode(language)}</div>
|
|
)}
|
|
{isDefined(title) && <Title>{shortenEllipsis(title, 50)}</Title>}
|
|
</Container>
|
|
);
|