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