1
- import { t } from "@lingui/macro" ;
1
+ import { t , Trans } from "@lingui/macro" ;
2
2
import { createId } from "@paralleldrive/cuid2" ;
3
3
import { DotsSixVertical , Envelope , Plus , X } from "@phosphor-icons/react" ;
4
4
import { CustomField as ICustomField } from "@reactive-resume/schema" ;
@@ -37,10 +37,10 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
37
37
animate = { { opacity : 1 , y : 0 } }
38
38
exit = { { opacity : 0 , y : - 50 } }
39
39
>
40
- < div className = "flex items-end justify-between space-x-2 " >
40
+ < div className = "flex items-end justify-between" >
41
41
< Button
42
42
size = "icon"
43
- variant = "link "
43
+ variant = "ghost "
44
44
className = "shrink-0"
45
45
onPointerDown = { ( event ) => {
46
46
controls . start ( event ) ;
@@ -52,32 +52,48 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
52
52
< Popover >
53
53
< Tooltip content = { t `Icon` } >
54
54
< PopoverTrigger asChild >
55
- < Button size = "icon" variant = "ghost" >
55
+ < Button size = "icon" variant = "ghost" className = "shrink-0" >
56
56
{ field . icon ? < i className = { cn ( `ph ph-${ field . icon } ` ) } /> : < Envelope /> }
57
57
</ Button >
58
58
</ PopoverTrigger >
59
59
</ Tooltip >
60
- < PopoverContent className = "p-1.5" >
60
+ < PopoverContent side = "bottom" align = "start" className = "flex flex-col gap-y-1.5 p-1.5" >
61
61
< Input
62
62
value = { field . icon }
63
63
placeholder = { t `Enter Phosphor Icon` }
64
64
onChange = { ( event ) => {
65
65
onChange ( { ...field , icon : event . target . value } ) ;
66
66
} }
67
67
/>
68
+
69
+ < p className = "text-xs opacity-80" >
70
+ < Trans >
71
+ Visit{ " " }
72
+ < a
73
+ href = "https://phosphoricons.com/"
74
+ target = "_blank"
75
+ className = "underline"
76
+ rel = "noopener noreferrer nofollow"
77
+ >
78
+ Phosphor Icons
79
+ </ a > { " " }
80
+ for a list of available icons
81
+ </ Trans >
82
+ </ p >
68
83
</ PopoverContent >
69
84
</ Popover >
70
85
71
86
< Input
87
+ className = "mx-2"
72
88
placeholder = { t `Name` }
73
89
value = { field . name }
74
- className = "!ml-0"
75
90
onChange = { ( event ) => {
76
91
handleChange ( "name" , event . target . value ) ;
77
92
} }
78
93
/>
79
94
80
95
< Input
96
+ className = "mx-2"
81
97
placeholder = { t `Value` }
82
98
value = { field . value }
83
99
onChange = { ( event ) => {
@@ -87,8 +103,8 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
87
103
88
104
< Button
89
105
size = "icon"
90
- variant = "link "
91
- className = "!ml-0 shrink-0"
106
+ variant = "ghost "
107
+ className = "shrink-0"
92
108
onClick = { ( ) => {
93
109
onRemove ( field . id ) ;
94
110
} }
@@ -111,7 +127,7 @@ export const CustomFieldsSection = ({ className }: Props) => {
111
127
const onAddCustomField = ( ) => {
112
128
setValue ( "basics.customFields" , [
113
129
...customFields ,
114
- { id : createId ( ) , icon : "" , name : "" , value : "" } ,
130
+ { id : createId ( ) , icon : "envelope " , name : "" , value : "" } ,
115
131
] ) ;
116
132
} ;
117
133
0 commit comments