Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(projects): add translation and fix minor details in Projects create modal

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-16 16:10:19 +08:00
parent 501e6c7ed2
commit 99257ef70f
6 changed files with 177 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/ui/Select.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { useTranslation } from "../../hooks/useTranslation";
export interface SelectOption {
value: string | number;
@@ -12,6 +13,9 @@ interface SelectProps {
options: SelectOption[];
className?: string;
buttonClassName?: string;
isLoading?: boolean;
disabled?: boolean;
loadingText?: string;
}
export const Select: React.FC<SelectProps> = ({
@@ -20,12 +24,17 @@ export const Select: React.FC<SelectProps> = ({
options,
className = "",
buttonClassName = "",
isLoading = false,
disabled = false,
loadingText = "",
}) => {
const [isOpen, setIsOpen] = useState(false);
const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});
const buttonRef = useRef<HTMLButtonElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const { t } = useTranslation()
loadingText = loadingText || t.loadingText
// Close dropdown when clicking outside
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@@ -85,34 +94,36 @@ export const Select: React.FC<SelectProps> = ({
}, [isOpen]);
const selectedOption = options.find((o) => o.value === value) || options[0];
const isDisabled = disabled || isLoading;
return (
<div className={`relative inline-block ${className}`}>
<button
ref={buttonRef}
type="button"
onClick={() => setIsOpen(!isOpen)}
className={`flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-3 py-2 text-sm text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500 ${buttonClassName}`}
disabled={isDisabled}
onClick={() => !isDisabled && setIsOpen(!isOpen)}
className={`flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-3 py-2 text-sm text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed ${buttonClassName}`}
>
<span className="truncate">{selectedOption?.label}</span>
<svg
className={`w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 transition-transform ${
isOpen ? "rotate-180" : ""
}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
<span className="truncate">{isLoading ? loadingText : selectedOption?.label}</span>
{isLoading ? (
<svg className="w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 animate-spin text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
) : (
<svg
className={`w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 transition-transform ${isOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
)}
</button>
{isOpen &&
{isOpen && !isDisabled &&
createPortal(
<div
ref={dropdownRef}