import Link from 'next/link';
import clsx from 'clsx'

export const EvLink = (props: any) => {
  const className = clsx(
    props.className, 'text-slate-100, hover:text-slate-300'
  );

  return (
    <Link {...props} className={className}></Link>
  );
}

- Named exports
  - export function MyComponent() {}
  - Imported like:
    - import { MyComponent } from "./my-component"
  - Allows multiple exports per file.
    - import { MyComponent1, MyComponent2, MyComponent3 } from "./my-components"
  - Can be a barrel export.
- Default exports
  - export default MyComponent
  - Imported like:
    - import MyComponent from "./my-component"
  - And now you can give it any name you want:
    - import WhateverNameIsBest from "./my-component"
  - Can do it if the exported component is only going to be imported once, or if a file exports one thing.

function MyComponent({ condition }) {
  return (
    <div>
      <h1>Title</h1>
      {condition && <ConditionalComponent />}
    </div>
  );
}