wip: add sample data and types

biome.json

@@ -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
+    }
+}

frontend/biome.json

@@ -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
-	}
-}

frontend/src/App.tsx

@@ -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">
+                <Search.Content
-                    <div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
+                    class="h-[254px] overflow-scroll scrollbar-hide"
-                        {/* <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
+                    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" /> */}
+                <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
                 {/* {JSON.stringify(images())} */}
-                        <For each={images()}>
+                {/* <For each={images()}>
                             {(image) => (
                                 <A href={`/image/${image.ID}`}>
                                     <img
@@ -137,9 +134,7 @@ function App() {
                                     />
                                 </A>
                             )}
-                        </For>
+                        </For> */}
-                    </div>
-                </div>
             </div>
             <div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
                 footer

frontend/src/network/sample-data.ts

@@ -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",
+        },
+    },
+];

frontend/src/network/types.ts

@@ -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,
+};