tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
39 lines (38 loc) • 2.47 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useTheme } from "../../theme/ThemeProvider";
const ListTile = ({ leading, title, subtitle, trailing, onClick, styles, className = "", cornerRadius, hoverColor, backgroundColor, borderColor, borderWidth, borderStyle, fontFamily, fontSize, fontWeight, transitionDuration, spacingfactor, }) => {
const theme = useTheme();
const t = {
cornerRadius: cornerRadius !== undefined ? cornerRadius : theme.cornerRadius,
hoverColor: hoverColor || theme.secondaryColor,
backgroundColor: backgroundColor || theme.backgroundColor,
borderColor: borderColor || theme.borderColor,
borderWidth: borderWidth ?? theme.borderWidth,
borderStyle: borderStyle ?? theme.borderStyle,
fontFamily: fontFamily || theme.fontFamily,
fontSize: fontSize || theme.fontSize,
fontWeight: fontWeight || theme.fontWeight,
transitionDuration: transitionDuration || theme.transitionDuration,
spacingfactor: spacingfactor || theme.spacingfactor,
textColor: theme.textColor,
};
const [isHovered, setIsHovered] = React.useState(false);
return (_jsxs("div", { className: `tharikida-list-tile ${className}`, style: {
display: "flex",
alignItems: "center",
padding: `${t.spacingfactor * 1.5}px ${t.spacingfactor * 2}px`,
borderBottom: `${t.borderWidth} ${t.borderStyle} #ddd`,
cursor: onClick ? "pointer" : "default",
background: isHovered ? t.hoverColor : t.backgroundColor,
borderRadius: t.cornerRadius,
transition: t.transitionDuration,
fontFamily: t.fontFamily,
fontSize: t.fontSize,
fontWeight: t.fontWeight,
color: t.textColor,
...styles,
}, onClick: onClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [leading && (_jsx("div", { style: { marginRight: t.spacingfactor * 2 }, children: leading })), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: t.fontSize }, children: title }), subtitle && (_jsx("div", { style: { color: t.textColor, fontSize: t.fontSize * 0.9 }, children: subtitle }))] }), trailing && (_jsx("div", { style: { marginLeft: t.spacingfactor * 2 }, children: trailing }))] }));
};
export default ListTile;