sgod-library-frontend/dist/esm/types/components/examples/responsive-demo.d.ts

Thư viện component UI Frontend

import { type DeviceType, FLUID_BREAKPOINTS } from '../../utils/responsive';
/**
 * Demo utility functions cho Fluid Responsive Design System
 * Showcase các tính năng mới: viewport percentages, rem-based breakpoints, fluid scaling
 */
export declare const fluidTypographyExamples: {
    heroTitle: string;
    sectionTitle: string;
    mainHeading: string;
    subHeading: string;
    bodyLarge: string;
    bodyText: string;
    caption: string;
    small: string;
};
export declare const fluidGridExamples: {
    cardsGrid: string;
    productsGrid: string;
    galleryGrid: string;
    viewportCards: string;
    viewportProducts: string;
    viewportGallery: string;
};
export declare const fluidSpacingExamples: {
    elementPadding: {
        small: string;
        medium: string;
        large: string;
    };
    containerPadding: {
        small: string;
        medium: string;
        large: string;
    };
    sectionPadding: {
        small: string;
        medium: string;
        large: string;
    };
};
export declare const fluidContainerExamples: {
    narrow: string;
    default: string;
    wide: string;
    fullwidth: string;
    fluid: string;
};
export declare const fluidCardExamples: {
    compact: string;
    default: string;
    spacious: string;
    withShadow: string;
};
export declare const responsiveVisibilityExamples: {
    mobileOnly: string;
    tabletOnly: string;
    desktopOnly: string;
    tabletUp: string;
    desktopUp: string;
    hideMobile: string;
    hideTablet: string;
    hideDesktop: string;
};
export declare const usageExamples: {
    landingPage: {
        hero: string;
        title: string;
        subtitle: string;
        cta: string;
    };
    cardGrid: {
        container: string;
        grid: string;
        card: string;
        cardTitle: string;
        cardBody: string;
    };
    blog: {
        container: string;
        title: string;
        content: string;
        sidebar: string;
    };
    dashboard: {
        container: string;
        statsGrid: string;
        statCard: string;
        chartContainer: string;
    };
};
export declare const demoUtils: {
    getCurrentDevice: () => DeviceType;
    getViewportInfo: () => {
        width: number;
        height: number;
        aspectRatio: number;
        isWidescreen: boolean;
        device: DeviceType;
    };
    createMediaQuery: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => string;
    matchesBreakpoint: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => boolean;
};
export declare const completeExamples: {
    ecommerce: {
        container: string;
        grid: string;
        productCard: string;
        productImage: string;
        productTitle: string;
        productPrice: string;
    };
    news: {
        container: string;
        grid: string;
        articleCard: string;
        articleImage: string;
        articleTitle: string;
        articleExcerpt: string;
        articleMeta: string;
    };
    portfolio: {
        container: string;
        grid: string;
        galleryItem: string;
        galleryImage: string;
        galleryOverlay: string;
    };
    team: {
        container: string;
        grid: string;
        memberCard: string;
        memberAvatar: string;
        memberName: string;
        memberRole: string;
        memberBio: string;
    };
};
export declare const fluidResponsiveDemo: {
    typography: {
        heroTitle: string;
        sectionTitle: string;
        mainHeading: string;
        subHeading: string;
        bodyLarge: string;
        bodyText: string;
        caption: string;
        small: string;
    };
    grids: {
        cardsGrid: string;
        productsGrid: string;
        galleryGrid: string;
        viewportCards: string;
        viewportProducts: string;
        viewportGallery: string;
    };
    spacing: {
        elementPadding: {
            small: string;
            medium: string;
            large: string;
        };
        containerPadding: {
            small: string;
            medium: string;
            large: string;
        };
        sectionPadding: {
            small: string;
            medium: string;
            large: string;
        };
    };
    containers: {
        narrow: string;
        default: string;
        wide: string;
        fullwidth: string;
        fluid: string;
    };
    cards: {
        compact: string;
        default: string;
        spacious: string;
        withShadow: string;
    };
    visibility: {
        mobileOnly: string;
        tabletOnly: string;
        desktopOnly: string;
        tabletUp: string;
        desktopUp: string;
        hideMobile: string;
        hideTablet: string;
        hideDesktop: string;
    };
    usage: {
        landingPage: {
            hero: string;
            title: string;
            subtitle: string;
            cta: string;
        };
        cardGrid: {
            container: string;
            grid: string;
            card: string;
            cardTitle: string;
            cardBody: string;
        };
        blog: {
            container: string;
            title: string;
            content: string;
            sidebar: string;
        };
        dashboard: {
            container: string;
            statsGrid: string;
            statCard: string;
            chartContainer: string;
        };
    };
    utils: {
        getCurrentDevice: () => DeviceType;
        getViewportInfo: () => {
            width: number;
            height: number;
            aspectRatio: number;
            isWidescreen: boolean;
            device: DeviceType;
        };
        createMediaQuery: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => string;
        matchesBreakpoint: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => boolean;
    };
    complete: {
        ecommerce: {
            container: string;
            grid: string;
            productCard: string;
            productImage: string;
            productTitle: string;
            productPrice: string;
        };
        news: {
            container: string;
            grid: string;
            articleCard: string;
            articleImage: string;
            articleTitle: string;
            articleExcerpt: string;
            articleMeta: string;
        };
        portfolio: {
            container: string;
            grid: string;
            galleryItem: string;
            galleryImage: string;
            galleryOverlay: string;
        };
        team: {
            container: string;
            grid: string;
            memberCard: string;
            memberAvatar: string;
            memberName: string;
            memberRole: string;
            memberBio: string;
        };
    };
    presets: {
        container: {
            narrow: string;
            default: string;
            wide: string;
            fullwidth: string;
            fluid: string;
        };
        typography: {
            hero: string;
            title: string;
            subtitle: string;
            heading: string;
            subheading: string;
            body: string;
            caption: string;
            small: string;
        };
        grid: {
            cards: string;
            products: string;
            gallery: string;
            'viewport-cards': string;
            'viewport-products': string;
            'viewport-gallery': string;
        };
        spacing: {
            section: string;
            container: string;
            element: string;
            sectionMargin: string;
            elementMargin: string;
        };
        card: {
            default: string;
            compact: string;
            spacious: string;
            minimal: string;
        };
    };
    common: {
        heroSection: string;
        cardGrid: string;
        productGrid: string;
        twoColumnLayout: string;
        threeColumnLayout: string;
    };
};
export default fluidResponsiveDemo;