UNPKG

@crossed/demo

Version:

A universal & performant styling library for React Native, Next.js & React

34 lines (33 loc) 1.52 kB
import { jsx, jsxs } from "react/jsx-runtime"; import { createList } from "@crossed/primitive"; import { styled } from "@crossed/styled"; import { YBox } from "@crossed/ui"; import { Text, View } from "react-native"; const List = createList({ Root: styled(View, { className: ["border border-neutral-800 rounded-lg"] }), Item: styled(View, { className: ["py-2 px-3"] }), SubTitle: styled(Text, { className: ["text-neutral-500 text-sm"] }), Title: styled(Text, { className: ["text-white text-base font-semibold"] }), Divider: styled(View, { className: ["border-t border-neutral-800"] }), Label: styled(Text, { className: ["text-white text-base font-bold"] }) }); const CreateListSimpleNativeDemo = () => { return /* @__PURE__ */ jsx(YBox, { space: "md", children: /* @__PURE__ */ jsxs(List, { children: [ /* @__PURE__ */ jsxs(List.Item, { children: [ /* @__PURE__ */ jsx(List.Title, { children: "Number 1" }), /* @__PURE__ */ jsx(List.SubTitle, { children: "Description Number 1" }) ] }), /* @__PURE__ */ jsxs(List.Item, { children: [ /* @__PURE__ */ jsx(List.Title, { children: "Number 2" }), /* @__PURE__ */ jsx(List.SubTitle, { children: "Description 2" }) ] }), /* @__PURE__ */ jsxs(List.Item, { children: [ /* @__PURE__ */ jsx(List.Title, { children: "Number 3" }), /* @__PURE__ */ jsx(List.SubTitle, { children: "Number 3 have description" }) ] }) ] }) }); }; export { CreateListSimpleNativeDemo }; //# sourceMappingURL=simple.native.js.map