112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Icon from "../../asset/icon";
|
|
import Vertical from "../../buttons/Vertical";
|
|
import {
|
|
ADD_CUSTOM_FIELD_TYPE_ICONS,
|
|
type AddCustomFieldType,
|
|
type AddCustomFieldViewProps,
|
|
} from "./AddCustomField.types";
|
|
|
|
function FieldTypeButton({
|
|
type,
|
|
label,
|
|
onSelect,
|
|
}: {
|
|
type: AddCustomFieldType;
|
|
label: string;
|
|
onSelect?: (t: AddCustomFieldType) => void;
|
|
}) {
|
|
return (
|
|
<Vertical
|
|
type="button"
|
|
ariaLabel={label}
|
|
onClick={() => onSelect?.(type)}
|
|
>
|
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center">
|
|
<Icon
|
|
name={ADD_CUSTOM_FIELD_TYPE_ICONS[type]}
|
|
size={32}
|
|
className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
|
|
/>
|
|
</span>
|
|
<span className="w-full text-center text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
|
|
{label}
|
|
</span>
|
|
</Vertical>
|
|
);
|
|
}
|
|
|
|
function AddCustomFieldViewComponent({
|
|
active,
|
|
onPressAdd,
|
|
onSelectFieldType,
|
|
ctaLabel,
|
|
fieldTypeLabels,
|
|
className,
|
|
}: AddCustomFieldViewProps) {
|
|
if (!active) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onPressAdd}
|
|
className={`flex h-[88px] w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
|
|
>
|
|
<span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M12 5v14M5 12h14"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
{ctaLabel}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const expandedShellClasses = ["flex w-full shrink-0", className ?? ""]
|
|
.join(" ")
|
|
.trim();
|
|
|
|
return (
|
|
<div className={expandedShellClasses}>
|
|
<div className="grid w-full grid-cols-4 gap-3">
|
|
<FieldTypeButton
|
|
type="text"
|
|
label={fieldTypeLabels.text}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
<FieldTypeButton
|
|
type="badges"
|
|
label={fieldTypeLabels.badges}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
<FieldTypeButton
|
|
type="upload"
|
|
label={fieldTypeLabels.upload}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
<FieldTypeButton
|
|
type="proportion"
|
|
label={fieldTypeLabels.proportion}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const AddCustomFieldView = memo(AddCustomFieldViewComponent);
|
|
AddCustomFieldView.displayName = "AddCustomFieldView";
|