<commit_before>import React, { Fragment, useState } from 'react';
import styles from './Tile.module.scss';
import icons from './icons';

const getUrl = (framework, url) => `${framework}${url.replace('../','/')}`;


const recursiveRender = (items, framework, group, collapsed, level = 0, isLast, forceTopLevel) => items.map((item, idx) => {
    if (item.frameworks && item.frameworks.indexOf(framework) === - 1) { return null; }

    const className = `menu-view-tile__list__${level === 0 || forceTopLevel ? 'block' : 'inline'}`;
    const hideComma = level === 0 || forceTopLevel || (isLast && items.length - 1 === idx);

    const title = !item.url || (collapsed && !item.showInCollapsed)
        ? null
        : (
        <span className={styles[className]}>
            <a href={getUrl(framework, item.url)}>{item.title}{item.enterprise ? <enterprise-icon/> : null}</a>
            {hideComma ? null : <span style={{ marginRight: 2 }}>,</span>}
        </span>
     )

     let content = null;
     const nextItems = item.items;
     
     if (nextItems && nextItems.length) {
        content = recursiveRender(
            nextItems,
            framework,
            item.title.replace(/\s/g,'_').toLowerCase(),
            collapsed, 
            level + 1,
            level === 0 || (isLast && idx === items.length - 1),
            !!item.forceTopLevelSubItems
        )
     }


    if (!title && !content) { return null; }

    return (
        <Fragment key={`${group}_${item.title.replace(/\s/g,'_').toLowerCase()}`}>
            { title }
            { content }
        </Fragment>
    )
});

const Tile = ({ data, group, framework }) => {
    const [collapsed] = useState(true);

    if (!data.icon) { return null; }
    const iconName = data.icon.replace('icon-','');
    const iconAlt= iconName.replace(/-/g,' ');

    return (
        <div className={styles['menu-view-tile']}>
            <div className={styles['menu-view-tile__icon']}><img alt={iconAlt} src={icons[iconName]}></img></div>
            <h3 className={styles['menu-view-tile__title']}>{data.title}</h3>
            <div className={styles['menu-view-tile__list']}>
                {recursiveRender(data.items, framework, group, collapsed)}
            </div>
        </div>
    )
}

export default Tile;<commit_msg>AG-4846 - documentation homepage<commit_after>import React, { Fragment, useState } from 'react';
import styles from './Tile.module.scss';
import icons from './icons';

const getUrl = (url) => url.replace('../', '');

const recursiveRender = (items, framework, group, collapsed, level = 0, isLast, forceTopLevel) => items.map((item, idx) => {
    if (item.frameworks && item.frameworks.indexOf(framework) === - 1) { return null; }

    const className = `menu-view-tile__list__${level === 0 || forceTopLevel ? 'block' : 'inline'}`;
    const hideComma = level === 0 || forceTopLevel || (isLast && items.length - 1 === idx);

    const title = item.url && (!collapsed || item.showInCollapsed) && (
        <span className={ styles[className]}>
            <a href={ getUrl(item.url) }>{ item.title }{ item.enterprise && <enterprise-icon/> }</a>
            { !hideComma && <span style={{ marginRight: 2 }}>,</span> }
        </span>
     )

     let content = null;
     const nextItems = item.items;
     
     if (nextItems && nextItems.length) {
        content = recursiveRender(
            nextItems,
            framework,
            item.title.replace(/\s/g,'_').toLowerCase(),
            collapsed, 
            level + 1,
            level === 0 || (isLast && idx === items.length - 1),
            !!item.forceTopLevelSubItems
        )
     }


    if (!title && !content) { return null; }

    return (
        <Fragment key={`${group}_${item.title.replace(/\s/g,'_').toLowerCase()}`}>
            { title }
            { content }
        </Fragment>
    )
});

const Tile = ({ data, group, framework }) => {
    const [collapsed] = useState(true);

    if (!data.icon) { return null; }
    const iconName = data.icon.replace('icon-','');
    const iconAlt= iconName.replace(/-/g,' ');

    return (
        <div className={ styles['menu-view-tile'] }>
            <div className={styles['menu-view-tile__icon']}><img alt={ iconAlt } src={ icons[iconName] }></img></div>
            <h3 className={styles['menu-view-tile__title']}>{ data.title }</h3>
            <div className={styles['menu-view-tile__list']}>
                { recursiveRender(data.items, framework, group, collapsed) }
            </div>
        </div>
    )
}

export default Tile;
{'fraction_non_alphanumeric': 0.18060420315236428, 'fraction_numerical': 0.005691768826619965, 'mean_word_length': 2.4457013574660635, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6101057', 'n_tokens_mistral': 1406, 'n_tokens_neox': 1368, 'n_words': 301}