Work Experience
Displays a list of work experiences with role details and durations.
Loading...
import type { ExperienceItemType } from "@/components/ncdai/work-experience";
import { WorkExperience } from "@/components/ncdai/work-experience";
const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "quaric",
companyName: "Quaric Co., Ltd.",
companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
positions: [
{
id: "30d3a9fb-021d-452a-9d27-83655369b4b9",
title: "Software Engineer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "code",
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",
],
isExpanded: true,
},
{
id: "7586afb2-40e8-49c4-8983-2254c9446540",
title: "Product Designer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "design",
description: `- Design UI/UX for Quaric Website with a seamless experience.
- Develop a Design System for consistency and efficiency.
- Create Quaric's brand identity, including logo and guidelines.`,
skills: [
"UI/UX Design",
"UX Writing",
"Design System",
"Brand Design",
"Figma",
],
},
{
id: "991692c4-7d02-4666-8d31-933c4831768d",
title: "Founder & Director",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "business",
description: `- Lead and manage the company's strategy.
- Oversee technical teams and product development.
- Manage relationships with customers and partners.`,
skills: ["Business Ownership", "Business Law", "Business Tax"],
},
],
isCurrentEmployer: true,
},
];
export function WorkExperienceDemo() {
return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />;
}Installation
pnpm dlx shadcn add @ncdai/work-experience
Usage
import { WorkExperience } from "@/components/ncdai/work-experience";
import type { ExperienceItemType } from "@/components/ncdai/work-experience";const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "1",
companyName: "Acme Inc.",
companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
isCurrentEmployer: true,
positions: [
{
id: "1-1",
title: "Senior Software Engineer",
employmentPeriod: "Jan 2022 - Present",
employmentType: "Full-time",
description:
"Leading a team of developers to build scalable web applications.",
icon: "code",
skills: ["JavaScript", "React", "Node.js"],
isExpanded: true,
},
{
id: "1-2",
title: "Software Engineer",
employmentPeriod: "Jan 2020 - Dec 2021",
employmentType: "Full-time",
description:
"Developed and maintained web applications using modern technologies.",
icon: "code",
skills: ["HTML", "CSS", "JavaScript"],
},
],
},
];<WorkExperience experiences={WORK_EXPERIENCE} />Props
Props for the WorkExperience component:
| Prop | Type | Description |
|---|---|---|
experiences | ExperienceItemType[] | An array of work experience items to display. Each item includes company details and positions held. |
className | string | Additional CSS classes to apply to the root element. |
Types
type ExperiencePositionIconType = "design" | "code" | "business" | "education";
type ExperiencePositionItemType = {
/** Unique identifier for the position */
id: string;
/** The job title or position name */
title: string;
/** The period during which the position was held (e.g., "Jan 2020 - Dec 2021") */
employmentPeriod: string;
/** The type of employment (e.g., "Full-time", "Part-time", "Contract") */
employmentType?: string;
/** A brief description of the position or responsibilities */
description?: string;
/** An icon representing the position */
icon?: ExperiencePositionIconType;
/** A list of skills associated with the position */
skills?: string[];
/** Indicates if the position details are expanded in the UI */
isExpanded?: boolean;
};
type ExperienceItemType = {
/** Unique identifier for the experience item */
id: string;
/** Name of the company where the experience was gained */
companyName: string;
/** URL or path to the company's logo image */
companyLogo?: string;
/** List of positions held at the company */
positions: ExperiencePositionItemType[];
/** Indicates if this is the user's current employer */
isCurrentEmployer?: boolean;
};Examples
Loading...
import type { ExperienceItemType } from "@/components/ncdai/work-experience";
import { WorkExperience } from "@/components/ncdai/work-experience";
const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "quaric",
companyName: "Quaric Co., Ltd.",
companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
positions: [
{
id: "30d3a9fb-021d-452a-9d27-83655369b4b9",
title: "Software Engineer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "code",
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",
],
isExpanded: true,
},
{
id: "7586afb2-40e8-49c4-8983-2254c9446540",
title: "Product Designer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "design",
description: `- Design UI/UX for Quaric Website with a seamless experience.
- Develop a Design System for consistency and efficiency.
- Create Quaric's brand identity, including logo and guidelines.`,
skills: [
"UI/UX Design",
"UX Writing",
"Design System",
"Brand Design",
"Figma",
],
},
{
id: "991692c4-7d02-4666-8d31-933c4831768d",
title: "Founder & Director",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "business",
description: `- Lead and manage the company's strategy.
- Oversee technical teams and product development.
- Manage relationships with customers and partners.`,
skills: ["Business Ownership", "Business Law", "Business Tax"],
},
],
isCurrentEmployer: true,
},
];
export function WorkExperienceDemo() {
return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />;
}