fix: icon picker not working (#1080)
* fix: icon picker not working * fix: project icon in analytics sidebar
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
e3a114cd69
commit
7f5fdb9589
10 changed files with 158 additions and 71 deletions
|
|
@ -153,12 +153,21 @@ export const AnalyticsSidebar: React.FC<Props> = ({
|
|||
return (
|
||||
<div key={project.id}>
|
||||
<h5 className="text-sm flex items-center gap-1">
|
||||
{project.icon ? (
|
||||
{project.emoji ? (
|
||||
<span className="grid h-6 w-6 flex-shrink-0 place-items-center">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
{String.fromCodePoint(parseInt(project.emoji))}
|
||||
</span>
|
||||
) : project.icon_prop ? (
|
||||
<div className="h-6 w-6 grid place-items-center flex-shrink-0">
|
||||
<span
|
||||
style={{ color: project.icon_prop.color }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
{project.icon_prop.name}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="grid h-8 w-8 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
<span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -254,12 +263,21 @@ export const AnalyticsSidebar: React.FC<Props> = ({
|
|||
) : (
|
||||
<div className="hidden md:flex md:flex-col h-full overflow-y-auto">
|
||||
<div className="flex items-center gap-1">
|
||||
{projectDetails?.icon ? (
|
||||
<span className="grid h-6 w-6 flex-shrink-0 place-items-center">
|
||||
{String.fromCodePoint(parseInt(projectDetails.icon))}
|
||||
</span>
|
||||
{projectDetails?.emoji ? (
|
||||
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">
|
||||
{String.fromCodePoint(parseInt(projectDetails.emoji))}
|
||||
</div>
|
||||
) : projectDetails?.icon_prop ? (
|
||||
<div className="h-6 w-6 grid place-items-center flex-shrink-0">
|
||||
<span
|
||||
style={{ color: projectDetails.icon_prop.color }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
{projectDetails.icon_prop.name}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="grid h-8 w-8 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
<span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{projectDetails?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,7 @@ const tabOptions = [
|
|||
},
|
||||
];
|
||||
|
||||
const EmojiIconPicker: React.FC<Props> = ({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
onIconColorChange,
|
||||
onIconsClick,
|
||||
}) => {
|
||||
const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorChange }) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
|
@ -181,13 +175,13 @@ const EmojiIconPicker: React.FC<Props> = ({
|
|||
</div>
|
||||
<hr className="mb-1 h-[1px] w-full border-brand-base" />
|
||||
<div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
|
||||
{icons.material_rounded.map((icon) => (
|
||||
{icons.material_rounded.map((icon, index) => (
|
||||
<button
|
||||
key={`${icon.name}-${index}`}
|
||||
type="button"
|
||||
className="mb-1 flex h-4 w-4 select-none items-center text-lg"
|
||||
key={icon.name}
|
||||
onClick={() => {
|
||||
if (onIconsClick) onIconsClick(icon.name);
|
||||
onChange({ name: icon.name, color: activeColor });
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
10
apps/app/components/emoji-icon-picker/types.d.ts
vendored
10
apps/app/components/emoji-icon-picker/types.d.ts
vendored
|
|
@ -1,7 +1,13 @@
|
|||
export type Props = {
|
||||
label: string | React.ReactNode;
|
||||
value: any;
|
||||
onChange: (data: any) => void;
|
||||
onIconsClick?: (data: any) => void;
|
||||
onChange: (
|
||||
data:
|
||||
| string
|
||||
| {
|
||||
name: string;
|
||||
color: string;
|
||||
}
|
||||
) => void;
|
||||
onIconColorChange?: (data: any) => void;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const defaultValues: Partial<IProject> = {
|
|||
identifier: "",
|
||||
description: "",
|
||||
network: 2,
|
||||
icon: getRandomEmoji(),
|
||||
emoji_and_icon: getRandomEmoji(),
|
||||
cover_image:
|
||||
"https://images.unsplash.com/photo-1575116464504-9e7652fddcb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyODUyNTV8MHwxfHNlYXJjaHwxOHx8cGxhbmV8ZW58MHx8fHwxNjgxNDY4NTY5&ixlib=rb-4.0.3&q=80&w=1080",
|
||||
};
|
||||
|
|
@ -113,8 +113,14 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
|||
|
||||
const onSubmit = async (formData: IProject) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
const { emoji_and_icon, ...payload } = formData;
|
||||
|
||||
if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
|
||||
else payload.emoji = formData.emoji_and_icon;
|
||||
|
||||
await projectServices
|
||||
.createProject(workspaceSlug as string, formData)
|
||||
.createProject(workspaceSlug as string, payload)
|
||||
.then((res) => {
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string),
|
||||
|
|
@ -164,7 +170,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
|
|
@ -213,12 +219,31 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
|||
<div className="mt-5 space-y-4 px-4 py-3">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div>
|
||||
<EmojiIconPicker
|
||||
label={String.fromCodePoint(parseInt(watch("icon")))}
|
||||
onChange={(emoji) => {
|
||||
setValue("icon", emoji);
|
||||
}}
|
||||
value={watch("icon")}
|
||||
<Controller
|
||||
name="emoji_and_icon"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<EmojiIconPicker
|
||||
label={
|
||||
value ? (
|
||||
typeof value === "object" ? (
|
||||
<span
|
||||
style={{ color: value.color }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
{value.name}
|
||||
</span>
|
||||
) : (
|
||||
String.fromCodePoint(parseInt(value))
|
||||
)
|
||||
) : (
|
||||
"Icon"
|
||||
)
|
||||
}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -185,11 +185,18 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
|||
<a>
|
||||
<div className="flex items-center gap-1">
|
||||
<h3 className="text-1.5xl font-medium text-brand-base">{project.name}</h3>
|
||||
{project.icon && (
|
||||
{project.emoji ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
{String.fromCodePoint(parseInt(project.emoji))}
|
||||
</span>
|
||||
)}
|
||||
) : project.icon_prop ? (
|
||||
<span
|
||||
style={{ color: project.icon_prop.color }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
{project.icon_prop.name}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="mt-3.5 mb-7 break-all">
|
||||
{truncateText(project.description ?? "", 100)}
|
||||
|
|
|
|||
|
|
@ -90,10 +90,19 @@ export const SingleSidebarProject: React.FC<Props> = ({
|
|||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
{project.icon ? (
|
||||
{project.emoji ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
{String.fromCodePoint(parseInt(project.emoji))}
|
||||
</span>
|
||||
) : project.icon_prop ? (
|
||||
<div className="h-7 w-7 grid place-items-center">
|
||||
<span
|
||||
style={{ color: project.icon_prop.color }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
{project.icon_prop.name}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue