2dcb59c19d
- Introduced new search card components for Contact, Event, Location, Note, Receipt, and Website. - Updated the App component to utilize these new components for displaying search results. - Changed the default font from Manrope to Switzer and updated related styles. - Added a new dependency `solid-motionone` to package.json. - Improved search functionality with a new sample data structure and enhanced search logic.
27 lines
834 B
TypeScript
27 lines
834 B
TypeScript
import { Separator } from "@kobalte/core/separator";
|
|
|
|
import { IconLink } from "@tabler/icons-solidjs";
|
|
import type { Website } from "../../network/types";
|
|
|
|
type Props = {
|
|
item: Website;
|
|
};
|
|
|
|
export const SearchCardWebsite = ({ item }: Props) => {
|
|
const { data } = item;
|
|
|
|
return (
|
|
<div class="absolute inset-0 p-3 bg-blue-50">
|
|
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
|
|
<p class="text-sm text-neutral-900 font-bold">{data.title}</p>
|
|
<IconLink size={20} class="text-neutral-500 mt-1" />
|
|
</div>
|
|
<p class="text-xs text-neutral-500">{data.url}</p>
|
|
<Separator class="my-2" />
|
|
<p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
|
|
{data.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|