better tabs example

Author: lovasoa

examples/official-site/examples/tabs.sql

@@ -0,0 +1,27 @@
+create table if not exists tab_example_cards as 
+select 'Leaf' as title, 'Leaf_1_web' as img, 'f4' as prefix, 'green' as color union all
+select 'Caterpillar', 'Caterpillar_of_box_tree_moth%2C_Germany_2019', 'a9', 'green' union all
+select 'Butterfly', 'Common_brimstone_butterfly_(Gonepteryx_rhamni)_male', '6a', 'green' union all
+select 'Flower', 'Red-poppy-flower_-_West_Virginia_-_ForestWander', 'fd', 'red' union all
+select 'Bird', 'Summer_tanager_(Piranga_rubra)_male_Copan_3', 'dd', 'red' union all
+select 'Medusa', 'Aurelia_aurita_2', '5c', 'blue';
+
+select 'tab' as component, true as center;
+select 'Show all cards' as title, 'All things are beautiful' as description, '?' as link, $tab is null as active;
+select format('Show %s cards', color) as title,
+       format('%s things are beautiful', color) as description,
+       format('?tab=%s', color) as link,
+       $tab=color as active,
+       case $tab when color then color end as color -- only show the color when the tab is active
+from tab_example_cards
+group by color; 
+
+
+select 'card' as component;
+select title, 
+    format('https://upload.wikimedia.org/wikipedia/commons/thumb/%s/%s/%s.jpg/640px-%s.jpg', substr(prefix,1,1), prefix, img, img) as top_image,
+    color
+from tab_example_cards
+where $tab is null or $tab = color;
+
+select 'text' as component, 'See [source code on GitHub](https://github.com/lovasoa/SQLpage/blob/main/examples/official-site/examples/tabs.sql)' as contents_md;

examples/official-site/sqlpage/migrations/13_tab.sql

@@ -81,7 +81,10 @@ For example, if the page is `/my-page.sql`, then the first tab will have a link
 
 You could then for instance display contents coming from the database based on the value of the `tab` parameter.
 For instance: `SELECT ''text'' AS component, contents_md FROM my_page_contents WHERE tab = $tab`
-        ',
+
+Note that the example below is completely static, and does not use the `tab` parameter to actually switch between tabs.
+View the [dynamic tabs example](examples/tabs.sql).
+',
         JSON(
             '[
             { "component": "tab" },