Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-07-14 23:07:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1780 from dhavalsavalia/custom-icons-in-header

Browse Source 
fix(CustomField): add a way to have icon in custom fields
This commit is contained in:
Amruth Pillai
2024-05-20 16:44:37 +02:00
committed by GitHub
parent 97286739f2 a033c3eff6
commit 0124db049b
11 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/artboard/src/templates/azurill.tsx
+1 -1
View File
@@ -241,7 +241,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/bronzor.tsx
+1 -1
View File
@@ -218,7 +218,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/chikorita.tsx
+1 -1
View File
@@ -264,7 +264,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/ditto.tsx
+1 -1
View File
@@ -245,7 +245,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/gengar.tsx
+1 -1
View File
@@ -214,7 +214,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/glalie.tsx
+1 -1
View File
@@ -269,7 +269,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/nosepass.tsx
+1 -1
View File
@@ -263,7 +263,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/pikachu.tsx
+1 -1
View File
@@ -245,7 +245,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/artboard/src/templates/rhyhorn.tsx
+1 -1
View File
@@ -217,7 +217,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
apps/client/index.html
+4 -1
View File
@@ -35,10 +35,13 @@
<!-- Styles -->
<link rel="stylesheet" href="/src/styles/main.css" />
</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>
<!-- Scripts -->
<script type="module" src="/src/main.tsx"></script>
<!-- Phosphor Icons -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
</body>
</html>
apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
+26 -2
View File
@@ -1,8 +1,15 @@
import { t } from "@lingui/macro";
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 { Button, Input } from "@reactive-resume/ui";
import {
Popover,
PopoverContent,
PopoverTrigger,
Tooltip,
Button,
Input,
} from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { AnimatePresence, Reorder, useDragControls } from "framer-motion";
@@ -42,6 +49,23 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<DotsSixVertical />
</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
placeholder={t`Name`}
value={field.name}