Create label atom

src/components/atoms/Label/Label.test.tsx

@@ -0,0 +1,34 @@
+import {render, screen} from "@testing-library/react";
+import {describe, expect, it} from "vitest";
+import {Label} from "./Label";
+
+describe("Label Atom", () => {
+    it("renders the label text correctly", () => {
+        render(<Label htmlFor="email">Email Address</Label>);
+
+        expect(screen.getByText("Email Address")).toBeInTheDocument();
+    });
+
+    it("applies the htmlFor attribute correctly", () => {
+        render(<Label htmlFor="email">Email</Label>);
+
+        const label = screen.getByText("Email");
+        expect(label).toHaveAttribute("for", "email");
+    });
+
+    it("shows required indicator when required prop is true", () => {
+        render(
+            <Label htmlFor="email" required>
+                Email
+            </Label>
+        );
+
+        expect(screen.getByText("*")).toBeInTheDocument();
+    });
+
+    it("does not show required indicator when required is false", () => {
+        render(<Label htmlFor="email">Email</Label>);
+
+        expect(screen.queryByText("*")).not.toBeInTheDocument();
+    });
+});

src/components/atoms/Label/Label.tsx

@@ -0,0 +1,58 @@
+// src/components/atoms/Label/Label.tsx
+import type {LabelProps} from "./LabelProps";
+
+const sizeClasses: Record<NonNullable<LabelProps["size"]>, string> = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+};
+
+/**
+ * A form label component that supports various sizes, required indicators, and disabled states.
+ * @see LabelProps
+ * @example
+ * <Label htmlFor="email" size="lg">
+ *   Email Address
+ * </Label>
+ */
+export default function Label({
+                                  htmlFor,
+                                  children,
+                                  required,
+                                  size = "md",
+                                  disabled,
+                                  className,
+                              }: Readonly<LabelProps>) {
+    return (
+        <label
+            htmlFor={htmlFor}
+            className={[
+                "block font-medium text-slate-700 dark:text-slate-300",
+                sizeClasses[size],
+                disabled && "opacity-50 cursor-not-allowed",
+                className,
+            ]
+                .filter(Boolean)
+                .join(" ")}
+        >
+            {children}
+
+            {required && (
+                <>
+                    {/* Screen readers only */}
+                    <span className="sr-only">(required)</span>
+
+                    {/* Visual required indicator */}
+                    <span
+                        aria-hidden="true"
+                        className="ml-1 text-red-500"
+                    >
+                *
+                </span>
+                </>
+
+
+            )}
+        </label>
+    );
+}

src/components/atoms/Label/LabelProps.ts

@@ -0,0 +1,24 @@
+// src/components/atoms/Label/LabelProps.ts
+import type {ReactNode} from "react";
+
+export type LabelSize = "sm" | "md" | "lg";
+
+export interface LabelProps {
+    /** id of the input this label is associated with */
+    htmlFor?: string;
+
+    /** label text */
+    children: ReactNode;
+
+    /** show required asterisk */
+    required?: boolean;
+
+    /** visual size */
+    size?: LabelSize;
+
+    /** disabled appearance */
+    disabled?: boolean;
+
+    /** extra tailwind classes */
+    className?: string;
+}

src/components/layout/Header/Header.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import Header from "./Header";
+
+describe("Header component", () => {
+    const mockLogout = vi.fn();
+
+    const defaultProps = {
+        user: { name: "Karuna" },
+        onLogout: mockLogout,
+    };
+
+    it("renders the navbar container", () => {
+        render(<Header {...defaultProps} />);
+        expect(screen.getByRole("banner")).toBeInTheDocument();
+    });
+
+    it("renders the app title", () => {
+        render(<Header {...defaultProps} />);
+        expect(screen.getByText("daisyUI")).toBeInTheDocument();
+    });
+
+    it("renders the hamburger menu link", () => {
+        render(<Header {...defaultProps} />);
+        const menuLink = screen.getAllByRole("link")[0];
+        expect(menuLink).toHaveAttribute("href", "/");
+    });
+
+    it("renders profile button", () => {
+        render(<Header {...defaultProps} />);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("shows the first letter of the user's name in profile image", () => {
+        render(<Header {...defaultProps} />);
+        const profileImg = screen.getByAltText("Karuna profile");
+        expect(profileImg).toHaveAttribute(
+            "src",
+            expect.stringContaining("K")
+        );
+    });
+
+    it("uses fallback text when user is undefined", () => {
+        render(<Header onLogout={mockLogout} />);
+        expect(screen.getByAltText("User profile")).toBeInTheDocument();
+    });
+
+    it("calls onLogout when profile button is clicked", () => {
+        render(<Header {...defaultProps} />);
+        const profileButton = screen.getByRole("button");
+
+        fireEvent.click(profileButton);
+
+        expect(mockLogout).toHaveBeenCalledOnce();
+    });
+});