1---
 2import { footerConfig, profileConfig } from '@/config';
 3
 4const currentYear = new Date().getFullYear();
 5---
 6
 7<footer class="mt-auto shrink-0" id="page-footer">
 8  {
 9    footerConfig.columns && (
10      <div class="mx-auto mt-4 mb-8 flex w-full max-w-(--breakpoint-xl) flex-wrap justify-between px-8 md:px-12 xl:px-8">
11        {footerConfig.columns.map((col) => (
12          <nav class="grid grid-cols-1 gap-4">
13            <ul class="menu">
14              <li class="menu-title">
15                <h3 class="font-bold uppercase">{col.title}</h3>
16              </li>
17              {col.items.map((item) => (
18                <li>
19                  <a href={item.link} {...(item.blank ? { target: '_blank' } : {})}>
20                    {item.text}
21                  </a>
22                </li>
23              ))}
24            </ul>
25          </nav>
26        ))}
27      </div>
28    )
29  }
30</footer>
31<footer
32  class="footer border-base-300 bg-base-200 text-base-content flex flex-col justify-between border-t px-10 py-4 text-lg md:flex-row"
33  id="footer"
34>
35  <aside class="items-center">
36    <p>
37      © {footerConfig.copyrightYear}{
38        footerConfig.copyrightYear < currentYear && `-${currentYear}`
39      }
40      <a href="/about/" class="font-bold">{profileConfig.name}</a>
41    </p>
42  </aside>
43  <nav class="flex flex-row">
44    {
45      footerConfig.rightItems.map((item) => (
46        <span>
47          {item.map((c) => {
48            if (typeof c === 'string') return <span>{c}</span>;
49            else if ('link' in c)
50              return (
51                <a href={c.link} class={c.class || ''} target="_blank">
52                  {c.text}
53                </a>
54              );
55            else return <span class:list={c.class || ''}>{c.text}</span>;
56          })}
57        </span>
58      ))
59    }
60  </nav>
61</footer>
62
63<style>
64  a {
65    @apply duration-150;
66
67    &:hover {
68      color: var(--color-primary);
69    }
70  }
71</style>