yolando/website-portofolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement skill management form and dynamic icon rendering component

Browse Source
This commit is contained in:
Yolando
2026-04-11 01:41:02 +07:00
parent 87f6114807
commit a51c1ed1f3
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/skills/skill-form.tsx
View File

@@ -104,7 +104,7 @@ export function SkillForm({ initialData, skillId }: { initialData?: any; skillId
<div className="space-y-3"> <div className="space-y-3">
<label className="text-sm font-semibold"> <label className="text-sm font-semibold">
Devicon Slug <span className="text-muted-foreground font-normal">(opsional — untuk ikon di Hero)</span> Devicon Slug / Custom URL <span className="text-muted-foreground font-normal">(contoh: spring, atau /icons/logo.svg)</span>
</label> </label>
<input <input
name="iconName" name="iconName"
@@ -117,7 +117,9 @@ export function SkillForm({ initialData, skillId }: { initialData?: any; skillId
{iconPreview && ( {iconPreview && (
<div className="flex items-center gap-3 p-3 rounded-xl border border-border bg-muted/20"> <div className="flex items-center gap-3 p-3 rounded-xl border border-border bg-muted/20">
<img <img
src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconPreview}/${iconPreview}-original.svg`} src={iconPreview.startsWith("http") || iconPreview.startsWith("/")
? iconPreview
: `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconPreview}/${iconPreview}-original.svg`}
alt={iconPreview} alt={iconPreview}
className="w-10 h-10 object-contain" className="w-10 h-10 object-contain"
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}

6
src/features/skills/skill-icon.tsx
View File

@@ -14,9 +14,13 @@ export function SkillIcon({ iconName, name }: { iconName: string | null; name: s
); );
} }
const iconSrc = iconName.startsWith("http") || iconName.startsWith("/")
? iconName
: `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconName}/${iconName}-original.svg`;
return ( return (
<img <img
src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconName}/${iconName}-original.svg`} src={iconSrc}
alt={name} alt={name}
className="w-9 h-9 object-contain" className="w-9 h-9 object-contain"
onError={() => setErrored(true)} onError={() => setErrored(true)}