feat: create WriteNewEntryLink shared component with feedback style

[jdy8739]

• Extract WriteNewEntryLink as reusable atom component
• Apply feedback style aesthetic with gradient, smooth transitions, and hover effects
• Update drafts page to use WriteNewEntryLink component
• Update user profile page to use WriteNewEntryLink component
• Centralize styling for easier maintenance and consistency

[claude]

Code Review: WriteNewEntryLink Component

Thanks for this PR! The component extraction follows good DRY principles and improves maintainability. Here's my feedback:

✅ Strengths

1. Good Abstraction: Successfully eliminates code duplication across drafts and user profile pages
2. Proper Component Placement: Correctly placed in /components/atoms/ following Atomic Design principles
3. Follows Navigation Rules: Correctly uses Next.js <Link> component for internal navigation
4. Theme-Safe Styling: Uses CSS variables (primary, border, etc.) instead of hardcoded colors
5. Accessible Design: Good touch target sizes (px-6 py-3) for mobile usability
6. Clean Props API: Simple, extensible interface with sensible defaults

⚠️ Code Quality Issues

1. Violates Export Policy (Critical)

Location: components/atoms/write-new-entry-link.tsx:24

The component uses export default at the top level, but according to CLAUDE.md:

Exports at Bottom: All export and export default statements must be at the bottom of files

Should be:

const WriteNewEntryLink = ({ ... }) => { ... };

export default WriteNewEntryLink;

2. Missing Arrow Function Consistency

Location: components/atoms/write-new-entry-link.tsx:9

While the component uses an arrow function (correct), it should follow the pattern used in other atoms like badge.tsx where the function declaration and export are separate.

3. Inconsistent Styling Pattern

Location: components/atoms/write-new-entry-link.tsx:16

The component uses template literal string concatenation for className:

className={`...base-styles ${className}`}

However, other atom components in the codebase follow different patterns:

• badge.tsx: Uses template literals with explicit concatenation
• button.tsx: Uses template literals with line breaks

Recommendation: For consistency with badge.tsx, consider extracting base classes into a constant:

const baseClasses = "inline-flex items-center px-6 py-3 rounded-lg transition-all duration-300 ease-out border border-primary/40 bg-gradient-to-br from-primary/15 to-primary/5 text-primary font-semibold gap-2 whitespace-nowrap";

return (
  <Link href={href} className={`${baseClasses} hover:scale-105 hover:shadow-md hover:from-primary/25 hover:to-primary/10 hover:border-primary/60 ${className}`}>
    ...
  </Link>
);

4. Potential Accessibility Concern

Location: components/atoms/write-new-entry-link.tsx:18

The text "Write New Entry" is hardcoded. Consider making it configurable for better reusability:

interface WriteNewEntryLinkProps {
  href?: string;
  className?: string;
  children?: React.ReactNode; // Allow custom text
}

const WriteNewEntryLink = ({
  href = "/write",
  className = "",
  children = "Write New Entry", // Default text
}: WriteNewEntryLinkProps) => {
  return (
    <Link href={href} className={...}>
      <PenTool className="w-4 h-4" />
      {children}
    </Link>
  );
};

💡 Design Considerations

1. Icon Flexibility

The PenTool icon is hardcoded. Consider whether different contexts might want different icons, or if the icon should be optional:

showIcon?: boolean;

2. Long Gradient Class String

The className is quite long (240+ characters). While functional, it makes the component harder to scan. The pattern used in button.tsx with separated variant classes might be clearer.

🔒 Security & Performance

• ✅ No security concerns
• ✅ No performance issues
• ✅ Proper use of Next.js Link for client-side routing (no page reloads)
• ✅ Responsive hover states work well across devices

📝 Test Coverage

No tests were included. Consider adding:

• Rendering test with default props
• Test that href prop works correctly
• Test that className prop merges properly
• Snapshot test for visual regression

🎯 Summary

Required Changes:

1. Move export default WriteNewEntryLink to the bottom of the file (per CLAUDE.md)

Recommended Changes:

1. Extract base classes into a constant for better readability
2. Consider making text content configurable via children prop

Optional Enhancements:

1. Add unit tests
2. Consider icon flexibility
3. Document usage with JSDoc comments

Overall, this is a solid refactoring that improves code organization. The main issue is the export placement which violates the project's style guide.