grid-list-action-tiles

use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::item::{self, ItemMediaVariant, ItemRootProps};
use fandhe_frontend_pre_styled_ui::link_overlay::{self, overlay};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};

const TILE_ATTR: &str = "data-blocks-grid-list-action-tiles-tile";
const ITEM_ATTR: &str = "data-blocks-grid-list-action-tiles-item";
const MEDIA_ATTR: &str = "data-blocks-grid-list-action-tiles-media";
const CONTENT_ATTR: &str = "data-blocks-grid-list-action-tiles-content";
const ARROW_ATTR: &str = "data-blocks-grid-list-action-tiles-arrow";

/// タイル 1 件分のデータ（モジュール doc「href の方針」節参照）。
struct Tile {
    href: &'static str,
    title: &'static str,
    description: &'static str,
    icon_path_d: &'static str,
}

/// タイル 6 件（サイト内に実在する索引ページのみを指す）。
const TILES: [Tile; 6] = [
    Tile {
        href: "../../guides/",
        title: "ガイドを読む",
        description: "導入から実践までの手順を順番に確認できます。",
        icon_path_d: "M4 4h12v16H4zM8 8h4M8 12h4",
    },
    Tile {
        href: "../../examples/",
        title: "サンプルを試す",
        description: "実際に動くサンプルプロジェクトを確認できます。",
        icon_path_d: "M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z",
    },
    Tile {
        href: "../../primitives/",
        title: "Primitives を見る",
        description: "構造とアクセシビリティを担う headless 部品一覧です。",
        icon_path_d: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
    },
    Tile {
        href: "../../themes/",
        title: "Themes を見る",
        description: "そのまま使える意匠付きの部品一覧です。",
        icon_path_d: "M4 6h16M4 12h16M4 18h10",
    },
    Tile {
        href: "../",
        title: "Blocks 一覧に戻る",
        description: "既存部品を組み合わせた合成例の一覧です。",
        icon_path_d: "M20 12H4M10 6l-6 6 6 6",
    },
    Tile {
        href: "../../api/",
        title: "API Reference を読む",
        description: "公開 API の詳細なリファレンスを確認できます。",
        icon_path_d: "m9 6 6 6-6 6",
    },
];

/// 自作の線画（stroke）アイコンを組み立てる（
/// [`super::super::marketing::cta::cta_feature_links::geo_icon`] と同型の
/// パターン。装飾用途のため `IconProps::label` は付けない）。
fn geo_icon(path_d: &'static str) -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", path_d),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// タイル 1 件分を組み立てる（モジュール doc「タイル全体のリンク化と矢印
/// の配置」節）。
fn action_tile(tile: &Tile) -> Node {
    link_overlay::root(
        vec![(TILE_ATTR, "")],
        vec![
            item::root(
                ItemRootProps::default(),
                vec![(ITEM_ATTR, "")],
                vec![
                    item::media(
                        ItemMediaVariant::Icon,
                        vec![(MEDIA_ATTR, "")],
                        vec![geo_icon(tile.icon_path_d)],
                    ),
                    item::content(
                        vec![(CONTENT_ATTR, "")],
                        vec![
                            heading(
                                HeadingLevel::H3,
                                &HeadingProps::default(),
                                vec![],
                                vec![text(tile.title)],
                            ),
                            styled_text::text(
                                &TextProps {
                                    variant: TextVariant::Muted,
                                    ..TextProps::default()
                                },
                                vec![],
                                vec![text(tile.description)],
                            ),
                        ],
                    ),
                    item::actions(vec![(ARROW_ATTR, "")], vec![geo_icon("m9 18 6-6-6-6")]),
                ],
            ),
            overlay(tile.href, vec![("aria-label", tile.title)], vec![]),
        ],
    )
}

/// `grid-list-action-tiles` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-grid-list-action-tiles-grid")],
        TILES.iter().map(action_tile).collect(),
    )
}