counterweight
a5a1a2c1ad
- Translate LoadingState and EmptyState components (common namespace) - Translate Header navigation labels (navigation namespace) - Translate StatusBadge trade status labels (exchange namespace) - Create navigation.json translation files for es, en, ca - Create exchange.json translation files for status/direction/transfer labels - Update IntlProvider to load navigation and exchange namespaces - Update frontend tests to expect Spanish translations (default language) - Configure Playwright to use English language for e2e tests via storageState - Fix test expectations to match translated strings All frontend and e2e tests passing.
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { utilityStyles } from "../styles/shared";
|
|
import { useTranslation } from "../hooks/useTranslation";
|
|
|
|
interface EmptyStateProps {
|
|
/** Message to display when empty */
|
|
message: string;
|
|
/** Optional hint/subtitle text */
|
|
hint?: string;
|
|
/** Show loading state instead of empty message */
|
|
isLoading?: boolean;
|
|
/** Optional action element (e.g., link or button) */
|
|
action?: React.ReactNode;
|
|
/** Custom style override */
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
/**
|
|
* Standardized empty state component.
|
|
* Displays a message when there's no data, or a loading state.
|
|
*/
|
|
export function EmptyState({ message, hint, isLoading, action, style }: EmptyStateProps) {
|
|
const t = useTranslation("common");
|
|
|
|
if (isLoading) {
|
|
return <div style={{ ...utilityStyles.emptyState, ...style }}>{t("loading")}</div>;
|
|
}
|
|
|
|
return (
|
|
<div style={{ ...utilityStyles.emptyState, ...style }}>
|
|
<p style={styles.emptyText}>{message}</p>
|
|
{hint && <p style={styles.emptyHint}>{hint}</p>}
|
|
{action && <div style={styles.action}>{action}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const styles: Record<string, React.CSSProperties> = {
|
|
emptyText: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
color: "rgba(255, 255, 255, 0.6)",
|
|
fontSize: "1rem",
|
|
margin: 0,
|
|
},
|
|
emptyHint: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
color: "rgba(255, 255, 255, 0.4)",
|
|
fontSize: "0.85rem",
|
|
marginTop: "0.5rem",
|
|
},
|
|
action: {
|
|
marginTop: "1rem",
|
|
},
|
|
};
|