@dharshana333/react-ui-components/dist/esm/App.js

A collection of premium, customizable React UI components including Line and PriceLookup with animations, themes, and accessibility features

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Line from './Linecomponent/Line';
function App() {
    return (_jsxs("div", { className: "App", children: [_jsx("header", { className: "App-header", children: _jsx("h1", { children: "Line Component Demo" }) }), _jsxs("main", { children: [_jsxs("section", { children: [_jsx("h2", { children: "Basic Lines" }), _jsx(Line, { variant: "solid", color: "#ff6b6b" }), _jsx(Line, { variant: "dashed", color: "#4ecdc4" }), _jsx(Line, { variant: "dotted", color: "#45b7d1" })] }), _jsxs("section", { children: [_jsx("h2", { children: "Animated Lines" }), _jsx(Line, { variant: "animated", gradientColors: ['#ff6b6b', '#4ecdc4'] }), _jsx(Line, { variant: "wave", color: "#45b7d1" }), _jsx(Line, { variant: "pulse", color: "#96ceb4" })] }), _jsxs("section", { children: [_jsx("h2", { children: "Glow Effects" }), _jsx(Line, { variant: "glow", color: "#ff6b6b", glowIntensity: "low" }), _jsx(Line, { variant: "glow", color: "#4ecdc4", glowIntensity: "medium" }), _jsx(Line, { variant: "glow", color: "#45b7d1", glowIntensity: "high" })] }), _jsxs("section", { children: [_jsx("h2", { children: "Patterns" }), _jsx(Line, { variant: "solid", color: "#ff6b6b", pattern: "chevron" }), _jsx(Line, { variant: "solid", color: "#4ecdc4", pattern: "dots" }), _jsx(Line, { variant: "solid", color: "#45b7d1", pattern: "zigzag" })] }), _jsxs("section", { children: [_jsx("h2", { children: "Interactive Lines" }), _jsx(Line, { variant: "gradient", hoverEffect: "scale", onClick: () => alert('Line clicked!'), gradientColors: ['#ff6b6b', '#4ecdc4'] }), _jsx(Line, { variant: "solid", color: "#45b7d1", hoverEffect: "glow", onClick: () => console.log('Glow line clicked') })] }), _jsxs("section", { children: [_jsx("h2", { children: "Vertical Lines" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '20px', height: '100px' }, children: [_jsx(Line, { orientation: "vertical", variant: "solid", color: "#ff6b6b", length: "80px" }), _jsx(Line, { orientation: "vertical", variant: "dashed", color: "#4ecdc4", length: "80px" }), _jsx(Line, { orientation: "vertical", variant: "gradient", gradientColors: ['#ff6b6b', '#4ecdc4'], length: "80px" })] })] })] })] }));
}
export default App;