projects list responsiveness (#4279)

This commit is contained in:
Ramesh Kumar Chandra 2024-04-29 00:54:02 +05:30 committed by GitHub
parent 4bccbc9804
commit ea436c925a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 130 additions and 27 deletions

View file

@ -11,12 +11,13 @@ import { cn } from "@/helpers/common.helper";
type Props = {
onChange: (value: TProjectOrderByOptions) => void;
value: TProjectOrderByOptions | undefined;
isMobile?: boolean;
};
const DISABLED_ORDERING_OPTIONS = ["sort_order"];
export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
const { onChange, value } = props;
const { onChange, value, isMobile = false } = props;
const orderByDetails = PROJECT_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
@ -25,12 +26,23 @@ export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
return (
<CustomMenu
className={`${isMobile ? "flex w-full justify-center" : ""}`}
customButton={
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
<ArrowDownWideNarrow className="h-3 w-3" />
{orderByDetails?.label}
<ChevronDown className="h-3 w-3" strokeWidth={2} />
</div>
<>
{isMobile ? (
<div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
<ArrowDownWideNarrow className="h-3 w-3" />
{orderByDetails?.label}
<ChevronDown className="h-3 w-3" strokeWidth={2} />
</div>
) : (
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-200")}>
<ArrowDownWideNarrow className="h-3 w-3" />
{orderByDetails?.label}
<ChevronDown className="h-3 w-3" strokeWidth={2} />
</div>
)}
</>
}
placement="bottom-end"
closeOnSelect