Move files into different folders

src/modules/core/components/texts/Kbd.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
+export const Kbd = styled(Typography)(({ theme }) => ({
+    display: 'inline-block',
+    padding: '0.2em 0.4em',
+    fontSize: '0.85em',
+    lineHeight: '1.4',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '3px',
+    boxShadow: `inset 0 -1px 0 ${theme.palette.divider}`,
+    fontFamily: 'monospace, monospace',
+}));

src/modules/core/components/texts/Metadata.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Stack, { StackProps } from '@mui/material/Stack';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+
+export const Metadata = ({
+    title,
+    value,
+    stackProps,
+    titleProps,
+    valueProps,
+}: {
+    title: string;
+    value: string;
+    stackProps?: StackProps;
+    titleProps?: TypographyProps;
+    valueProps?: TypographyProps;
+}) => (
+    <Stack
+        {...stackProps}
+        sx={{ flexDirection: 'row', columnGap: 1, flexWrap: 'wrap', alignItems: 'baseline', ...stackProps?.sx }}
+    >
+        <Typography
+            {...titleProps}
+            sx={{
+                color: 'text.secondary',
+                ...titleProps?.sx,
+            }}
+        >
+            {title}
+        </Typography>
+        <Typography {...valueProps}>{value}</Typography>
+    </Stack>
+);

src/modules/core/components/texts/Superscript.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Trans, useTranslation } from 'react-i18next';
+import { TranslationKey } from '@/Base.types.ts';
+
+/**
+ * Expects a translation key of format "{{value}}<0>superscript</0>"
+ * @param i18nKey
+ * @param value
+ * @constructor
+ */
+export const Superscript = ({ i18nKey, value }: { i18nKey: TranslationKey; value: string }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Stack sx={{ flexDirection: 'row', gap: 0.25 }}>
+            <Trans
+                t={t}
+                // the type of "key" causes tsc error: "TS2590: Expression produces a union type that is too complex to represent"
+                i18nKey={i18nKey as any}
+                values={{ value }}
+                components={[<Typography variant="caption" sx={{ fontSize: 'x-small', opacity: 0.75 }} />]}
+            />
+        </Stack>
+    );
+};

src/modules/core/components/texts/TypographyMaxLines.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { styled, Theme, TypographyVariant } from '@mui/material/styles';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
+
+const DEFAULT_LINE_HEIGHT = '1.5';
+
+const getLineHeight = (theme: Theme, variant: TypographyProps['variant']): string => {
+    if (variant === undefined) {
+        return DEFAULT_LINE_HEIGHT;
+    }
+
+    if (!(variant in theme.typography)) {
+        return DEFAULT_LINE_HEIGHT;
+    }
+
+    return theme.typography[variant as TypographyVariant].lineHeight?.toString() ?? DEFAULT_LINE_HEIGHT;
+};
+
+type TypographyMaxLinesProps = {
+    lines?: number;
+};
+
+export const TypographyMaxLines = styled(Typography, {
+    shouldForwardProp: shouldForwardProp<TypographyMaxLinesProps>(['lines']),
+})<TypographyProps & TypographyMaxLinesProps>(({ variant, theme, lines = 2 }) => ({
+    lineHeight: getLineHeight(theme, variant),
+    display: '-webkit-box',
+    WebkitLineClamp: `${lines}`,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    overflowWrap: 'break-word',
+}));