src/App.svelte

<script lang="ts">
  import Dataframe from "@gradio/dataframe";

  let searchQuery = "";
  let value = {
    data: [
      ["@gradio/dataframe", "0.19.1", "Published 21 hours ago", "ISC"],
      ["svelte", "5.0.0", "Published 3 days ago", "MIT"],
      ["typescript", "5.0.0", "Published 1 week ago", "Apache-2.0"],
      ["vite", "5.0.0", "Published 2 weeks ago", "MIT"],
      ["@sveltejs/vite-plugin-svelte", "3.0.0", "Published 1 month ago", "MIT"],
      ["@gradio/client", "0.15.2", "Published 2 days ago", "ISC"],
      ["svelte-check", "3.0.0", "Published 1 week ago", "MIT"],
      ["@gradio/upload", "0.19.0", "Published 3 days ago", "ISC"],
      ["tslib", "2.4.0", "Published 2 months ago", "0BSD"],
      ["@gradio/textbox", "0.18.9", "Published 1 month ago", "ISC"]
    ],
    headers: ["Package", "Version", "Last Publish", "License"],
  };

  $: filteredData = value.data.filter(row => 
    row[0].toLowerCase().includes(searchQuery.toLowerCase())
  );

  $: displayData = {
    ...value,
    data: filteredData
  };

  function handle_change(e: any) {
    console.log("changed", e.detail);
  }

  function handle_select(e: any) {
    console.log("selected", e.detail);
  }

  function handle_input(e: any) {
    console.log("input", e.detail);
  }
</script>

<header class="header">
  <div class="container">
    <div class="header-content">
      <h1 class="logo">npm</h1>
      <div class="search-container">
        <input 
          type="text" 
          placeholder="Search packages..." 
          bind:value={searchQuery}
          class="search-input"
        />
        <button class="btn search-btn">Search</button>
      </div>
      <nav class="nav">
        <a href="#" class="nav-link">Sign in</a>
      </nav>
    </div>
  </div>
</header>

<main class="main-content">
  <div class="container">
    <div class="card">
      <h2>@gradio/dataframe</h2>
      <p class="package-description">
        Standalone Svelte component that brings Gradio's Dataframe UI to any Svelte/SvelteKit project.
        This component is lightweight, virtualized for efficient rendering of large datasets, and offers 
        features like column freezing, and customizable styling via CSS variables.
      </p>
      
      <div class="df-theme">
        <Dataframe
          bind:value={displayData}
          datatype={["str", "str", "str", "str"]}
          show_search="none"
          show_row_numbers={true}
          show_copy_button={true}
          show_fullscreen_button={true}
          editable={false}
          on:change={handle_change}
          on:select={handle_select}
          on:input={handle_input}
          max_height={400}
        />
      </div>
    </div>
  </div>
</main>

<style>
  .header {
    background: white;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  body.dark .header {
    background: #374151;
  }

  .header-content {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
  }

  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-right: auto;
  }

  .search-container {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    max-width: 500px;
  }

  .search-input {
    flex: 1;
    padding: 0.75rem;
    font-size: 1rem;
  }

  .search-btn {
    padding: 0.75rem 1.5rem;
  }

  .nav-link {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    padding: 0.5rem 1rem;
  }

  body.dark .nav-link {
    color: var(--text-dark);
  }

  .nav-link:hover {
    color: var(--primary);
  }

  .main-content {
    padding: 2rem 0;
  }

  .package-description {
    margin: 1rem 0;
    color: #6b7280;
  }

  body.dark .package-description {
    color: #d1d5db;
  }
</style>