Work Experience
Display work experiences with role details, company logos, and durations.
Loading…
import { BriefcaseBusinessIcon, CodeXmlIcon } from "lucide-react"
import type { ExperienceItemType } from "@/components/work-experience"
import { WorkExperience } from "@/components/work-experience"
export function WorkExperienceDemo() {
return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />
}
const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "quaric",
companyName: "Quaric",
companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
positions: [
{
id: "2",
title: "Design Engineer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: CodeXmlIcon,
description: `- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with [online.gov.vn](https://online.gov.vn) for compliance.
- Developed online ordering to streamline purchases.
- Build and maintain ZaDark.com with Docusaurus, integrating AdSense.
- Develop and maintain the ZaDark extension for Zalo Web on Chrome, Safari, Edge, and Firefox — with 15,000+ active users via Chrome Web Store.`,
skills: [
"Next.js",
"Strapi",
"Auth0",
"VNPAY-QR",
"Docker",
"NGINX",
"Google Cloud",
"Docusaurus",
"Extension",
"Research",
"Project Management",
],
},
{
id: "1",
title: "Founder & Director",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: BriefcaseBusinessIcon,
skills: ["Business Ownership", "Business Law", "Business Tax"],
},
],
isCurrentEmployer: true,
},
]Features
- Supports multiple positions per company.
- Markdown rendering for position descriptions.
- Company logos and duration display.
Installation
$ pnpm dlx shadcn add @ncdai/work-experience
Usage
import { WorkExperience } from "@/components/work-experience"
import type { ExperienceItemType } from "@/components/work-experience"const experiences: ExperienceItemType[] = []
<WorkExperience experiences={experiences} />API Reference
WorkExperience
Prop
Type
ExperienceItemType
Prop
Type
ExperiencePositionItemType
Prop
Type