wip: add sample data and types

This commit is contained in:
2025-03-17 22:20:26 +01:00
parent 3c71fddbd2
commit b3b37d252d
5 changed files with 229 additions and 43 deletions

17
biome.json Normal file
View File

@ -0,0 +1,17 @@
{
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 4
}
}

View File

@ -1,17 +0,0 @@
{
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 4
}
}

View File

@ -99,35 +99,32 @@ function App() {
</Search.Indicator>
<Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
</Search.Control>
<Search.Portal>
<Search.Content
class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
onCloseAutoFocus={(e) => e.preventDefault()}
>
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-col justify-start gap-1.5 leading-none focus:outline-none" />
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
😬 No emoji found
</Search.NoResult>
</Search.Content>
</Search.Portal>
</Search>
</div>
{/* <div class="mt-4 text-base leading-none">
Emoji selected: {emoji()?.emoji} {emoji()?.name}
</div> */}
<ImageViewer />
{/* <ImageViewer /> */}
<div class="px-4 mt-4 bg-white rounded-t-2xl">
<div class="h-[254px] overflow-scroll scrollbar-hide">
<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
{/* <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" /> */}
{/* {JSON.stringify(images())} */}
<For each={images()}>
<Search.Content
class="h-[254px] overflow-scroll scrollbar-hide"
onCloseAutoFocus={(e) => e.preventDefault()}
>
<Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" />
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
No results found
</Search.NoResult>
</Search.Content>
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
{/* {JSON.stringify(images())} */}
{/* <For each={images()}>
{(image) => (
<A href={`/image/${image.ID}`}>
<img
@ -137,9 +134,7 @@ function App() {
/>
</A>
)}
</For>
</div>
</div>
</For> */}
</div>
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
footer

View File

@ -0,0 +1,88 @@
import type { DataArray } from "./types";
export const sampleData: DataArray = [
{
type: "Event",
data: {
title: "Startup Mixer",
dateTime: {
start: "2025-06-01T19:00:00+01:00",
end: "2025-06-01T23:00:00+01:00",
},
location: "The Kings Arms, 27 Ropemaker St, London EC2Y 9LY",
description:
"Casual networking event for tech entrepreneurs and investors in London.",
organizer: {
name: "London Startup Network",
email: "events@londonstartupnetwork.co.uk",
},
attendees: ["Alex Smith", "Sofia Rodriguez"],
category: "Networking",
},
},
{
type: "Contact",
data: {
name: "João Silva",
phoneNumber: "+351 912 345 678",
emailAddress: "joao.silva@example.pt",
address: "Rua do Carmo 12, 1200-161 Lisboa, Portugal",
organization: "PortoTech Solutions",
title: "Marketing Manager",
notes: "Met at Web Summit Lisbon 2024",
},
},
{
type: "Location",
data: {
name: "Barman Dictat",
address: "14 Khreshchatyk St., Kyiv, Ukraine",
category: "Bar",
description:
"Stylish cocktail bar in the heart of Kyiv with an extensive menu of craft cocktails and a sophisticated atmosphere",
},
},
{
type: "Note",
data: {
title: "Q2 2025 Marketing Strategy",
keywords: ["strategy", "digital marketing", "Q2", "2025"],
content:
"## Executive Summary\n\nOur Q2 2025 marketing strategy focuses on expanding our digital presence and increasing customer engagement across all platforms. We will leverage AI-driven personalization to enhance user experience and implement a multi-channel approach to reach our target demographics more effectively.\n\n### Key Objectives\n\n1. Increase website traffic by 30% through SEO optimization and content marketing.\n2. Boost social media engagement rates by 25% using interactive campaigns and influencer partnerships.\n3. Implement a new customer loyalty program to improve retention rates by 15%.\n\nBy aligning our marketing efforts with emerging trends and customer preferences, we aim to solidify our market position and drive sustainable growth throughout Q2 and beyond.",
},
},
{
type: "Website",
data: {
url: "https://www.attio.com",
title: "Attio",
description:
"Attio is the AI-native CRM that builds, scales and grows your company to the next level.",
category: "SaaS",
},
},
{
type: "Receipt",
data: {
receiptDate: "2025-03-12T20:15:30+01:00",
orderNumber: "ORD12345",
amount: 49.99,
currency: "GBP",
vendor: "Zara Online Store",
items: [
{
name: "Slim Fit Dress Shirt",
quantity: 1,
price: 49.99,
currency: "GBP",
},
],
paymentMethod: "Visa",
shippingAddress: {
name: "Alex Smith",
address: "123 High St, London, EC2A 3AZ",
},
category: "Online Shopping",
},
},
];

View File

@ -0,0 +1,103 @@
interface DateTime {
start: string;
end: string;
}
interface Address {
name: string;
address: string;
}
interface Organizer {
name: string;
email: string;
}
interface ReceiptItem {
name: string;
quantity: number;
price: number;
currency: string;
}
interface DataItemType<T extends string, D> {
type: T;
data: D;
}
interface EventData {
title: string;
dateTime: DateTime;
location: string;
description: string;
organizer: Organizer;
attendees: string[];
category: string;
}
interface ContactData {
name: string;
phoneNumber: string;
emailAddress: string;
address: string;
organization: string;
title: string;
notes: string;
}
interface LocationData {
name: string;
address: string;
category: string;
description: string;
}
interface NoteData {
title: string;
keywords: string[];
content: string;
}
interface WebsiteData {
url: string;
title: string;
description: string;
category: string;
}
interface ReceiptData {
receiptDate: string;
orderNumber: string;
amount: number;
currency: string;
vendor: string;
items: ReceiptItem[];
paymentMethod: string;
shippingAddress: Address;
category: string;
}
type Event = DataItemType<"Event", EventData>;
type Contact = DataItemType<"Contact", ContactData>;
type Location = DataItemType<"Location", LocationData>;
type Note = DataItemType<"Note", NoteData>;
type Website = DataItemType<"Website", WebsiteData>;
type Receipt = DataItemType<"Receipt", ReceiptData>;
type DataItem = Event | Contact | Location | Note | Website | Receipt;
type DataArray = DataItem[];
export type {
DateTime,
Address,
Organizer,
ReceiptItem,
Event,
Contact,
Location,
Note,
Website,
Receipt,
DataItem,
DataArray,
};