@seip/blue-bird 0.4.4 → 0.4.6

package/frontend/resources/js/blue-bird/components/DataTable.jsx

@@ -1,126 +1,126 @@
-import React, { useState, useMemo } from 'react';
-import { useLanguage } from '../contexts/LanguageContext.jsx';
-import Button from './Button.jsx';
-import Input from './Input.jsx';
-
-export default function DataTable({
-    data = [],
-    columns = [],
-    rowsPerPage = 10,
-    searchable = true,
-    pagination = true,
-    onEdit,
-    onDelete
-}) {
-    const { t } = useLanguage();
-    const [currentPage, setCurrentPage] = useState(1);
-    const [searchTerm, setSearchTerm] = useState('');
-
-    const filteredData = useMemo(() => {
-        if (!searchTerm) return data;
-        const lowerTerm = searchTerm.toLowerCase();
-        return data.filter(item =>
-            columns.some(col => String(item[col.key] || '').toLowerCase().includes(lowerTerm))
-        );
-    }, [data, columns, searchTerm]);
-
-    const pageCount = Math.ceil(filteredData.length / rowsPerPage);
-    const paginatedData = useMemo(() => {
-        if (!pagination) return filteredData;
-        const start = (currentPage - 1) * rowsPerPage;
-        return filteredData.slice(start, start + rowsPerPage);
-    }, [filteredData, currentPage, rowsPerPage, pagination]);
-
-    return (
-        <div className="flex flex-col w-full gap-4">
-            {searchable && (
-                <div className="flex justify-end">
-                    <Input
-                        placeholder={t('search')}
-                        value={searchTerm}
-                        onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
-                        className="w-full md:w-64"
-                    />
-                </div>
-            )}
-
-            <div className="overflow-x-auto bg-white dark:bg-slate-900 rounded-lg shadow border border-gray-200 dark:border-slate-800">
-                <table className="min-w-full divide-y divide-gray-200 dark:divide-slate-800">
-                    <thead className="bg-gray-50 dark:bg-slate-800/50">
-                        <tr>
-                            {columns.map(col => (
-                                <th key={col.key} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
-                                    {col.title || col.key}
-                                </th>
-                            ))}
-                            {(onEdit || onDelete) && (
-                                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
-                                    {t('actions')}
-                                </th>
-                            )}
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-slate-900 divide-y divide-gray-200 dark:divide-slate-800">
-                        {paginatedData.length > 0 ? paginatedData.map((row, idx) => (
-                            <tr key={row.id || idx} className="hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors">
-                                {columns.map(col => (
-                                    <td key={col.key} className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
-                                        {row[col.key] || '-'}
-                                    </td>
-                                ))}
-                                {(onEdit || onDelete) && (
-                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
-                                        {onEdit && (
-                                            <Button variant="outline" className="px-2 py-1 text-xs" onClick={() => onEdit(row)}>
-                                                {t('edit')}
-                                            </Button>
-                                        )}
-                                        {onDelete && (
-                                            <Button variant="danger" className="px-2 py-1 text-xs" onClick={() => onDelete(row)}>
-                                                {t('delete')}
-                                            </Button>
-                                        )}
-                                    </td>
-                                )}
-                            </tr>
-                        )) : (
-                            <tr>
-                                <td colSpan={columns.length + (onEdit || onDelete ? 1 : 0)} className="px-6 py-4 text-center text-sm text-gray-500 dark:text-slate-400">
-                                    No data available.
-                                </td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
-            </div>
-
-            {pagination && pageCount > 1 && (
-                <div className="flex justify-end mt-4 gap-1">
-                    <Button
-                        variant="secondary"
-                        disabled={currentPage === 1}
-                        onClick={() => setCurrentPage(p => p - 1)}
-                    >
-                        &laquo;
-                    </Button>
-                    {Array.from({ length: pageCount }).map((_, i) => (
-                        <Button
-                            key={i}
-                            variant={currentPage === i + 1 ? 'primary' : 'ghost'}
-                            onClick={() => setCurrentPage(i + 1)}
-                        >
-                            {i + 1}
-                        </Button>
-                    ))}
-                    <Button
-                        variant="secondary"
-                        disabled={currentPage === pageCount}
-                        onClick={() => setCurrentPage(p => p + 1)}
-                    >
-                        &raquo;
-                    </Button>
-                </div>
-            )}
-        </div>
-    );
-}
+import React, { useState, useMemo } from 'react';
+import { useLanguage } from '../contexts/LanguageContext.jsx';
+import Button from './Button.jsx';
+import Input from './Input.jsx';
+
+export default function DataTable({
+    data = [],
+    columns = [],
+    rowsPerPage = 10,
+    searchable = true,
+    pagination = true,
+    onEdit,
+    onDelete
+}) {
+    const { t } = useLanguage();
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const filteredData = useMemo(() => {
+        if (!searchTerm) return data;
+        const lowerTerm = searchTerm.toLowerCase();
+        return data.filter(item =>
+            columns.some(col => String(item[col.key] || '').toLowerCase().includes(lowerTerm))
+        );
+    }, [data, columns, searchTerm]);
+
+    const pageCount = Math.ceil(filteredData.length / rowsPerPage);
+    const paginatedData = useMemo(() => {
+        if (!pagination) return filteredData;
+        const start = (currentPage - 1) * rowsPerPage;
+        return filteredData.slice(start, start + rowsPerPage);
+    }, [filteredData, currentPage, rowsPerPage, pagination]);
+
+    return (
+        <div className="flex flex-col w-full gap-4">
+            {searchable && (
+                <div className="flex justify-end">
+                    <Input
+                        placeholder={t('search')}
+                        value={searchTerm}
+                        onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
+                        className="w-full md:w-64"
+                    />
+                </div>
+            )}
+
+            <div className="overflow-x-auto bg-white dark:bg-slate-900 rounded-lg shadow border border-gray-200 dark:border-slate-800">
+                <table className="min-w-full divide-y divide-gray-200 dark:divide-slate-800">
+                    <thead className="bg-gray-50 dark:bg-slate-800/50">
+                        <tr>
+                            {columns.map(col => (
+                                <th key={col.key} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
+                                    {col.title || col.key}
+                                </th>
+                            ))}
+                            {(onEdit || onDelete) && (
+                                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
+                                    {t('actions')}
+                                </th>
+                            )}
+                        </tr>
+                    </thead>
+                    <tbody className="bg-white dark:bg-slate-900 divide-y divide-gray-200 dark:divide-slate-800">
+                        {paginatedData.length > 0 ? paginatedData.map((row, idx) => (
+                            <tr key={row.id || idx} className="hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors">
+                                {columns.map(col => (
+                                    <td key={col.key} className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
+                                        {row[col.key] || '-'}
+                                    </td>
+                                ))}
+                                {(onEdit || onDelete) && (
+                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+                                        {onEdit && (
+                                            <Button variant="outline" className="px-2 py-1 text-xs" onClick={() => onEdit(row)}>
+                                                {t('edit')}
+                                            </Button>
+                                        )}
+                                        {onDelete && (
+                                            <Button variant="danger" className="px-2 py-1 text-xs" onClick={() => onDelete(row)}>
+                                                {t('delete')}
+                                            </Button>
+                                        )}
+                                    </td>
+                                )}
+                            </tr>
+                        )) : (
+                            <tr>
+                                <td colSpan={columns.length + (onEdit || onDelete ? 1 : 0)} className="px-6 py-4 text-center text-sm text-gray-500 dark:text-slate-400">
+                                    No data available.
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {pagination && pageCount > 1 && (
+                <div className="flex justify-end mt-4 gap-1">
+                    <Button
+                        variant="secondary"
+                        disabled={currentPage === 1}
+                        onClick={() => setCurrentPage(p => p - 1)}
+                    >
+                        &laquo;
+                    </Button>
+                    {Array.from({ length: pageCount }).map((_, i) => (
+                        <Button
+                            key={i}
+                            variant={currentPage === i + 1 ? 'primary' : 'ghost'}
+                            onClick={() => setCurrentPage(i + 1)}
+                        >
+                            {i + 1}
+                        </Button>
+                    ))}
+                    <Button
+                        variant="secondary"
+                        disabled={currentPage === pageCount}
+                        onClick={() => setCurrentPage(p => p + 1)}
+                    >
+                        &raquo;
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/frontend/resources/js/blue-bird/components/Input.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import Label from './Label.jsx';
-
-export default function Input({ label, error, variant = "default", className = '', ...props }) {
-    const variants = {
-        default: "flex h-10 w-full rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        error: "flex h-10 w-full rounded-md border border-red-500 dark:border-red-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        fill: "flex h-10 w-full rounded-md border border-gray-100 dark:border-slate-800 bg-gray-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full"
-    }
-    const style = variants[variant] || variants.default;
-    return (
-        <div className={`flex flex-col gap-1.5 ${className}`}>
-            {label && <Label>{label}</Label>}
-            <input
-                className={`${style} ${error ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
-                {...props}
-            />
-            {error && <span className="text-xs font-medium text-red-500">{error}</span>}
-        </div>
-    );
-}
+import React from 'react';
+import Label from './Label.jsx';
+
+export default function Input({ label, error, variant = "default", className = '', ...props }) {
+    const variants = {
+        default: "flex h-10 w-full rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        error: "flex h-10 w-full rounded-md border border-red-500 dark:border-red-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        fill: "flex h-10 w-full rounded-md border border-gray-100 dark:border-slate-800 bg-gray-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full"
+    }
+    const style = variants[variant] || variants.default;
+    return (
+        <div className={`flex flex-col gap-1.5 ${className}`}>
+            {label && <Label>{label}</Label>}
+            <input
+                className={`${style} ${error ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+                {...props}
+            />
+            {error && <span className="text-xs font-medium text-red-500">{error}</span>}
+        </div>
+    );
+}

package/frontend/resources/js/blue-bird/components/Label.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
-
-export default function Label({ children, className = '', ...props }) {
-    return (
-        <label
-            className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className}`}
-            {...props}
-        >
-            {children}
-        </label>
-    );
-}
+import React from 'react';
+
+export default function Label({ children, className = '', ...props }) {
+    return (
+        <label
+            className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className}`}
+            {...props}
+        >
+            {children}
+        </label>
+    );
+}

package/frontend/resources/js/blue-bird/components/LanguageButton.jsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { useSPA } from '../contexts/SPAContext.jsx';
-import Button from './Button.jsx';
-
-/**
- * LanguageButton — A wrapper around the Button component that
- * automatically handles language switching via navigateToLang.
- *
- * @param {Object} props
- * @param {string} props.lang - The language code to switch to (e.g., "en", "es").
- * @param {React.ReactNode} props.children - Button content.
- */
-function LanguageButton({ lang, children, ...props }) {
-    const { navigateToLang } = useSPA();
-
-    return (
-        <Button onClick={() => navigateToLang(lang)} {...props}>
-            {children}
-        </Button>
-    );
-}
-
-export default LanguageButton;
+import React from 'react';
+import { useSPA } from '../contexts/SPAContext.jsx';
+import Button from './Button.jsx';
+
+/**
+ * LanguageButton — A wrapper around the Button component that
+ * automatically handles language switching via navigateToLang.
+ *
+ * @param {Object} props
+ * @param {string} props.lang - The language code to switch to (e.g., "en", "es").
+ * @param {React.ReactNode} props.children - Button content.
+ */
+function LanguageButton({ lang, children, ...props }) {
+    const { navigateToLang } = useSPA();
+
+    return (
+        <Button onClick={() => navigateToLang(lang)} {...props}>
+            {children}
+        </Button>
+    );
+}
+
+export default LanguageButton;

package/frontend/resources/js/blue-bird/components/Link.jsx

@@ -1,16 +1,16 @@
-import { useSPA } from "../contexts/SPAContext.jsx";
-import { Link as RouterLink } from "react-router-dom";
-
-function Link({ to, children, className = 'text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 transition-colors', ...props }) {
-    const { l } = useSPA();
-
-    const localizedTo = l(to);
-
-    return (
-        <RouterLink to={localizedTo} {...props} className={className}>
-            {children}
-        </RouterLink>
-    );
-}
-
+import { useSPA } from "../contexts/SPAContext.jsx";
+import { Link as RouterLink } from "react-router-dom";
+
+function Link({ to, children, className = 'text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 transition-colors', ...props }) {
+    const { l } = useSPA();
+
+    const localizedTo = l(to);
+
+    return (
+        <RouterLink to={localizedTo} {...props} className={className}>
+            {children}
+        </RouterLink>
+    );
+}
+
 export default Link;

package/frontend/resources/js/blue-bird/components/Modal.jsx

@@ -1,27 +1,27 @@
-import React, { useEffect } from 'react';
-
-export default function Modal({ isOpen, onClose, title, children }) {
-    useEffect(() => {
-        if (isOpen) document.body.style.overflow = 'hidden';
-        else document.body.style.overflow = 'unset';
-        return () => { document.body.style.overflow = 'unset'; };
-    }, [isOpen]);
-
-    if (!isOpen) return null;
-
-    return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 transition-opacity">
-            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-xl w-full max-w-lg mx-4 overflow-hidden transform transition-all border dark:border-slate-800">
-                <div className="flex justify-between items-center p-4 border-b dark:border-slate-800">
-                    <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h3>
-                    <button onClick={onClose} className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl leading-none">
-                        &times;
-                    </button>
-                </div>
-                <div className="p-4 text-slate-900 dark:text-slate-100">
-                    {children}
-                </div>
-            </div>
-        </div>
-    );
-}
+import React, { useEffect } from 'react';
+
+export default function Modal({ isOpen, onClose, title, children }) {
+    useEffect(() => {
+        if (isOpen) document.body.style.overflow = 'hidden';
+        else document.body.style.overflow = 'unset';
+        return () => { document.body.style.overflow = 'unset'; };
+    }, [isOpen]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 transition-opacity">
+            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-xl w-full max-w-lg mx-4 overflow-hidden transform transition-all border dark:border-slate-800">
+                <div className="flex justify-between items-center p-4 border-b dark:border-slate-800">
+                    <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h3>
+                    <button onClick={onClose} className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl leading-none">
+                        &times;
+                    </button>
+                </div>
+                <div className="p-4 text-slate-900 dark:text-slate-100">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

package/frontend/resources/js/blue-bird/components/Skeleton.jsx

@@ -1,45 +1,45 @@
-export default function Skeleton() {
-    return (
-        <div className="min-h-screen w-full bg-gray-50 p-4 md:p-8">
-            <div className="animate-pulse flex flex-col gap-6">
-
-                <div className="flex items-center justify-between w-full mb-4">
-                    <div className="h-10 w-32 bg-gray-300 rounded-lg"></div>
-                    <div className="flex space-x-4">
-                        <div className="h-10 w-10 bg-gray-300 rounded-full"></div>
-                        <div className="h-10 w-24 bg-gray-300 rounded-lg"></div>
-                    </div>
-                </div>
-
-                <div className="h-48 md:h-64 w-full bg-gray-300 rounded-2xl"></div>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div className="space-y-3">
-                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
-                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
-                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
-                    </div>
-
-                    <div className="space-y-3">
-                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
-                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
-                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
-                    </div>
-
-                    <div className="space-y-3">
-                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
-                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
-                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
-                    </div>
-                </div>
-
-                <div className="space-y-2 mt-4">
-                    <div className="h-4 w-full bg-gray-200 rounded"></div>
-                    <div className="h-4 w-full bg-gray-200 rounded"></div>
-                    <div className="h-4 w-2/3 bg-gray-200 rounded"></div>
-                </div>
-
-            </div>
-        </div>
-    )
+export default function Skeleton() {
+    return (
+        <div className="min-h-screen w-full bg-gray-50 p-4 md:p-8">
+            <div className="animate-pulse flex flex-col gap-6">
+
+                <div className="flex items-center justify-between w-full mb-4">
+                    <div className="h-10 w-32 bg-gray-300 rounded-lg"></div>
+                    <div className="flex space-x-4">
+                        <div className="h-10 w-10 bg-gray-300 rounded-full"></div>
+                        <div className="h-10 w-24 bg-gray-300 rounded-lg"></div>
+                    </div>
+                </div>
+
+                <div className="h-48 md:h-64 w-full bg-gray-300 rounded-2xl"></div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+                </div>
+
+                <div className="space-y-2 mt-4">
+                    <div className="h-4 w-full bg-gray-200 rounded"></div>
+                    <div className="h-4 w-full bg-gray-200 rounded"></div>
+                    <div className="h-4 w-2/3 bg-gray-200 rounded"></div>
+                </div>
+
+            </div>
+        </div>
+    )
 }

package/frontend/resources/js/blue-bird/components/Translate.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { useLanguage } from '../contexts/LanguageContext.jsx';
-
-/**
- * Renders translated text string given a key.
- * @param {Object} props
- * @param {string} props.k - The translation key.
- */
-export default function Translate({ k }) {
-    const { t } = useLanguage();
-    return <>{t(k)}</>;
-}
+import React from 'react';
+import { useLanguage } from '../contexts/LanguageContext.jsx';
+
+/**
+ * Renders translated text string given a key.
+ * @param {Object} props
+ * @param {string} props.k - The translation key.
+ */
+export default function Translate({ k }) {
+    const { t } = useLanguage();
+    return <>{t(k)}</>;
+}