composing (JSX-like)

[daiyam]

#![composer(JSXComposer)]

\Carousel(showArrows: false) {
	\.slide {
		\.slider-img-bg(style: {backgroundImage: `url(\(slideImg))`})
		
		\p.slider-text(animation: fadeInUp, delay: '1.3s') {
			\ Whether you are a business or an individual
			\br
			\ Whether you have a problem, a question or a project
			\br
			\ I'm here to help you and find a solution.
		}
		
		\p.slider-text(animation: fadeInUp, delay: '1.3s') \{
			Whether you are a business or an individual
			\br
			Whether you have a problem, a question or a project
			\br
			I'm here to help you and find a solution.
		}
		
		\\p.slider-text(animation: fadeInUp, delay: '1.3s') {
			Whether you are a business or an individual
			\br
			Whether you have a problem, a question or a project
			\br
			I'm here to help you and find a solution.
		}
	}
}

\p \{
	This is a very long and boring paragraph that spans multiple lines.
	Suddenly there is a \strong{strongly worded phrase} that cannot be \em{ignored}.
}
\\p {
	This is a very long and boring paragraph that spans multiple lines.
	Suddenly there is a \strong{strongly worded phrase} that cannot be \em{ignored}.
}
\p And here's an example of an interpolated tag with an attribute: \q(lang: 'es'){¡Hola Mundo!}

\Link.btn.with-icon(Actions.FREE_QUOTE) Request a free quote \i{\Icon(Icon.CHECK)}
\Link.btn.with-icon(Actions.FREE_QUOTE) Request a free quote \i\Icon(Icon.CHECK)

func Blog({posts}) {
	return
		\div {
			\ul {
				for const post in posts {
					// auto-tagging?
					\li(key: post.id)= post.title
				}
			}
			\hr
			for const post in posts {
				\div(key: post.id) {
					\h3= post.title
					\p= post.content
				}
			}
		}
}

const posts = [
	{id: 1, title: 'Hello World', content: 'Welcome to learning React!'}
	{id: 2, title: 'Installation', content: 'You can install React from npm.'}
]

ReactDOM.render(
	\Blog(posts)
	document.getElementById('root')
)

func User(user, authorised) {
	return
		\#user {
			if user.description? {
				// ReactComposer will surround the elements in a Fragement block
				\h2.green Description
				\p.description= user.description
			}
			else if authorised {
				\h2.blue Description
				\p.description \{
					User has no description,
					why not add one...
				}
			}
			else {
				\h2.red Description
				\p.description User has no description
			}
		}
}

func User(user) {
	unless user.isAnonymous {
		return \p You're logged in as \(user.name)
	}
}