1---
 2import { t } from '@utils/i18n';
 3
 4interface Props {
 5  backLinks: {
 6    refBy: {
 7      title: string;
 8      collection: 'posts' | 'spec';
 9      id: string;
10    };
11    context: string;
12    offset: [number, number];
13    id: string;
14  }[];
15}
16
17const { backLinks } = Astro.props;
18---
19
20<div class="bg-base-100 border-base-content/25 collapse-plus collapse my-4 border">
21  <input type="checkbox" />
22  <div class="collapse-title text-lg font-semibold">{t.info.backLinks()}</div>
23  <div class="collapse-content">
24    <ul class="list">
25      {
26        backLinks.map(({ refBy, context, id, offset }) => {
27          const url = refBy.collection === 'posts' ? `/posts/${refBy.id}` : `/${refBy.id}`;
28          return (
29            <li class="list-row">
30              <a href={`${url}#wiki-${id}`} title={refBy.title} class="list-col-grow">
31                <span class="text-base font-bold">{refBy.title}</span>
32                <div class="text-base-content/60 mt-2 flex flex-wrap items-start gap-x-4 gap-y-2 text-sm">
33                  <span>
34                    {context.slice(0, offset[0])}
35                    <strong class="text-primary">{context.slice(offset[0], offset[1])}</strong>
36                    {context.slice(offset[1])}
37                  </span>
38                </div>
39              </a>
40            </li>
41          );
42        })
43      }
44    </ul>
45  </div>
46</div>