Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 16:51:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(CustomField): add a way to have icon in custom fields

Browse Source
This commit is contained in:
Dhaval Savalia
2024-02-18 12:50:33 -05:00
parent c806dc890a
commit b92b4c9936
2 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/index.html
View File

@ -35,10 +35,13 @@
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="/src/styles/main.css" /> <link rel="stylesheet" href="/src/styles/main.css" />
</head> </head>
<body class="bg-background text-foreground text-sm antialiased print:bg-white print:m-0"> <body class="text-sm antialiased bg-background text-foreground print:bg-white print:m-0">
<div id="root"></div> <div id="root"></div>
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<!-- Phosphor Icons -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
</body> </body>
</html> </html>

29
apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
View File

@ -1,8 +1,15 @@
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { createId } from "@paralleldrive/cuid2"; import { createId } from "@paralleldrive/cuid2";
import { DotsSixVertical, Plus, X } from "@phosphor-icons/react"; import { DotsSixVertical, Envelope, Plus, X } from "@phosphor-icons/react";
import { CustomField as ICustomField } from "@reactive-resume/schema"; import { CustomField as ICustomField } from "@reactive-resume/schema";
import { Button, Input } from "@reactive-resume/ui"; import {
Popover,
PopoverContent,
PopoverTrigger,
Tooltip,
Button,
Input,
} from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils"; import { cn } from "@reactive-resume/utils";
import { AnimatePresence, Reorder, useDragControls } from "framer-motion"; import { AnimatePresence, Reorder, useDragControls } from "framer-motion";
@ -39,10 +46,26 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<DotsSixVertical /> <DotsSixVertical />
</Button> </Button>
<Popover>
<Tooltip content={t`Icon`}>
<PopoverTrigger asChild>
<Button size="icon" variant="ghost">
{field.icon ? <i className={`ph ph-${field.icon}`}></i> : <Envelope />}
</Button>
</PopoverTrigger>
</Tooltip>
<PopoverContent className="p-1.5">
<Input
value={field.icon}
placeholder={t`Enter Phosphor Icon`}
onChange={(event) => onChange({ ...field, icon: event.target.value })}
/>
</PopoverContent>
</Popover>
<Input <Input
placeholder={t`Name`} placeholder={t`Name`}
value={field.name} value={field.name}
className="!ml-0"
onChange={(event) => handleChange("name", event.target.value)} onChange={(event) => handleChange("name", event.target.value)}
/> />