```sql
SELECT
'list' as component,
'Popular websites' as title;
SELECT
name as title,
url as link,
CASE type
WHEN 1 THEN 'blue'
ELSE 'red'
END as color,
description, icon, active
FROM website;
```
|
![SQLPage list component](./docs/demo-list.png)
|
```sql
SELECT
'chart' as component,
'Quarterly Revenue' as title,
'area' as type;
SELECT
quarter AS x,
SUM(revenue) AS y
FROM finances
GROUP BY quarter
```
|
![SQLPage list component](./docs/demo-graph.png)
|
```sql
SELECT
'form' as component,
'User' as title,
'Create new user' as validate;
SELECT
name, type, placeholder,
required, description
FROM user_form;
INSERT INTO user
SELECT $first_name, $last_name, $birth_date
WHERE $first_name IS NOT NULL;
```
|
![SQLPage list component](./docs/demo-form.png)
|
```sql
select 'tab' as component, true as center;
select 'Show all cards' as title, '?' as link,
$tab is null as active;
select
format('Show %s cards', color) as title,
format('?tab=%s', color) as link,
$tab=color as active
from tab_example_cards
group by color;
select 'card' as component;
select
title, description, color
image_url as top_image, link
from tab_example_cards
where $tab is null or $tab = color;
select
'text' as component,
sqlpage.read_file_as_text('footer.md') as contents_md
```
|
![card component sql example](./docs/cards.png)
|