diff --git a/packages/ui/src/components/Command/GenerateSQL.tsx b/packages/ui/src/components/Command/GenerateSQL.tsx index d5826b00f9f..13515742bb0 100644 --- a/packages/ui/src/components/Command/GenerateSQL.tsx +++ b/packages/ui/src/components/Command/GenerateSQL.tsx @@ -331,47 +331,55 @@ Postgres SQL query: ) })} {promptData.length === 0 && !hasClippyError && ( -
-
- +
+
+

Example queries

+

+ Use these example queries to help get your project started quickly. +

-
-
    - {SAMPLE_QUERIES.find((item) => item.category === selectedCategory)?.queries.map( - (query, index) => ( - { - if (!search) { - handleConfirm(query) - } - }} - forceMount - key={query.replace(/\s+/g, '_')} +
    +
    +
      + {SAMPLE_QUERIES.map((item, index) => ( +
    • setSelectedCategory(item.category)} + className={cn( + 'px-4 py-1 cursor-pointer text-sm hover:bg-slate-300 rounded-md', + selectedCategory === item.category && 'bg-slate-400 ' + )} > -
      -
      - + {item.category} +
    • + ))} +
    +
    +
    +
      + {SAMPLE_QUERIES.find((item) => item.category === selectedCategory)?.queries.map( + (query, index) => ( + { + if (!search) { + handleConfirm(query) + } + }} + forceMount + key={query.replace(/\s+/g, '_')} + > +
      +
      + +
      +

      {query}

      -

      {query}

      -
    - - ) - )} -
+ + ) + )} + +
)}