parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve TS error in AboutMeContent - add CategoryKey type assertion for dynamic category access

Browse Source
This commit is contained in:
DevOps 2026-06-28 17:22:18 +00:00
parent 9f06b1aa4c
commit 34243ff641
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx
View File

@ -15,8 +15,10 @@ const CATEGORIES = {
"Architecture & Others": ["REST API", "TDD", "UI/UX Design", "Clean Architecture"],
};
type CategoryKey = keyof typeof CATEGORIES | "Other";
export default function AboutMeContent({ data }: AboutMeContentProps) {
const categorizedSkills = {
const categorizedSkills: Record<CategoryKey, string[]> = {
"Core Tech": [],
"Backend & Tools": [],
"Architecture & Others": [],
@ -27,7 +29,7 @@ export default function AboutMeContent({ data }: AboutMeContentProps) {
let matched = false;
for (const [cat, skills] of Object.entries(CATEGORIES)) {
if (skills.some((s) => skill.title.toLowerCase().includes(s.toLowerCase()))) {
categorizedSkills[cat].push(skill.title);
categorizedSkills[cat as CategoryKey].push(skill.title);
matched = true;
break;
}
@ -38,12 +40,12 @@ export default function AboutMeContent({ data }: AboutMeContentProps) {
const isRTL = typeof document !== "undefined" && document.dir === "rtl";
return (
<section
<section
className="relative flex w-full max-w-[1200px] flex-col items-center justify-center gap-12 py-20 lg:flex-row"
id="about-me"
>
{/* Text Section */}
<motion.div
<motion.div
initial={{ opacity: 0, x: isRTL ? 50 : -50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
@ -56,11 +58,11 @@ export default function AboutMeContent({ data }: AboutMeContentProps) {
<p className="text-lg text-muted-foreground leading-relaxed text-balance">
{data.description}
</p>
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
{Object.entries(categorizedSkills).map(([category, skills]) => (
skills.length > 0 && (
<motion.div
<motion.div
key={category}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@ -73,8 +75,8 @@ export default function AboutMeContent({ data }: AboutMeContentProps) {
</h3>
<div className="flex flex-wrap gap-2">
{skills.map((skill, idx) => (
<span
key={idx}
<span
key={idx}
className="tech-tag"
>
{skill}
@ -88,7 +90,7 @@ export default function AboutMeContent({ data }: AboutMeContentProps) {
</motion.div>
{/* Image Section */}
<motion.div
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8 }}