src/components/NameLink.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---
interface Props {
  name: {
    data: {
      name: string;
      domain: string;
      url?: string;
      candidate?: boolean;
    };
  };
  size?: 'large' | 'small';
}

const { name, size = 'large' } = Astro.props;
const nameParts = name.data.name.toLowerCase().split(" ");
const domain = name.data.domain.replace(".", "");
const url = name.data.url || `https://${name.data.domain}`;

const sizeClasses = {
  large: 'text-2xl',
  small: 'text-xl'
};
---

<span class={`${sizeClasses[size]} break-words`}>
  {nameParts.map((part, index) => (
    <>
      {index > 0 && " "}
      {part === domain ? (
        <a 
          href={url} 
          class="text-blue-600 hover:text-blue-800 hover:underline"
          rel={name.data.candidate ? "nofollow" : undefined}
        >
          {name.data.domain}
        </a>
      ) : (
        <span>{part}</span>
      )}
    </>
  ))}
</span>