UHasselt Component Library

React Reply 

<div class='react-reply'>
    <div class='react'>
        <form class="react-form" action="">
            <div class='paragraph feed-header-title-text'>
                <p>Je boodschap</p>
            </div>

            <textarea name="textarea" id="textarea" placeholder="placeholder" class="form-textarea "></textarea>

            <div class="react-submit">
                <button type="submit" href="#" class="button button-red ">
                    <span>
                        <span class="text">
                            Posten
                        </span>
                    </span>
                </button>

            </div>
        </form>
    </div>

    <div class="react-reply-reaction">
        <div class='feed-reaction'>
            <div class='feed-reaction-header'>
                <div class='feed-reaction-header-author'>
                    Albert Verscheuven
                </div>

                <span class='feed-reaction-header-time'>
                    15u45
                </span>
            </div>

            <div class='feed-reaction-body'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
                </p>
            </div>

            <div class='feed-reaction-footer'>
                <span class='feed-reaction-footer-col feed-reaction-footer-like'>
                    <div class='item-toggle'>
                        <input class='item-toggle-input' type='checkbox' id='like' name='like' value='like' />
                        <label for='like' class='icon-checked'>
                            <span class="icon fas fa-thumbs-up   " aria-hidden="true"></span>

                            <span class="label-text">Like</span>
                        </label>

                        <label for='like' class='icon-unchecked'>
                            <span class="icon fal fa-thumbs-up   " aria-hidden="true"></span>

                            <span class="label-text">Like</span>
                        </label>
                    </div>
                </span>
            </div>
        </div>
    </div>
    <div class="react-reply-reaction">
        <div class='feed-reaction'>
            <div class='feed-reaction-header'>
                <div class='feed-reaction-header-author'>
                    Albert Verscheuven
                </div>

                <span class='feed-reaction-header-time'>
                    15u45
                </span>
            </div>

            <div class='feed-reaction-body'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
                </p>
            </div>

            <div class='feed-reaction-footer'>
                <span class='feed-reaction-footer-col feed-reaction-footer-like'>
                    <div class='item-toggle'>
                        <input class='item-toggle-input' type='checkbox' id='like' name='like' value='like' />
                        <label for='like' class='icon-checked'>
                            <span class="icon fas fa-thumbs-up   " aria-hidden="true"></span>

                            <span class="label-text">Like</span>
                        </label>

                        <label for='like' class='icon-unchecked'>
                            <span class="icon fal fa-thumbs-up   " aria-hidden="true"></span>

                            <span class="label-text">Like</span>
                        </label>
                    </div>
                </span>
            </div>
        </div>
    </div>
    <div class="react-reply-reaction">
        <div class='feed-reaction'>
            <div class='feed-reaction-header'>
                <div class='feed-reaction-header-author'>
                    Albert Verscheuven
                </div>

                <span class='feed-reaction-header-time'>
                    15u45
                </span>
            </div>

            <div class='feed-reaction-body'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
                </p>
            </div>

            <div class='feed-reaction-footer'>
                <span class='feed-reaction-footer-col feed-reaction-footer-like'>
                    <div class='item-toggle'>
                        <input class='item-toggle-input' type='checkbox' id='like' name='like' value='like' />
                        <label for='like' class='icon-checked'>
                            <span class="icon fas fa-thumbs-up   " aria-hidden="true"></span>

                            <span class="label-text">Like</span>
                        </label>

                        <label for='like' class='icon-unchecked'>
                            <span class="icon fal fa-thumbs-up   " aria-hidden="true"></span>

                            <span class="label-text">Like</span>
                        </label>
                    </div>
                </span>
            </div>
        </div>
    </div>
</div>
 
<div class='react-reply'>
   {{render '@react'}}

    {{#each reactions as |reaction|}}
        <div class="react-reply-reaction">
            {{render '@feed-reaction'}}
        </div>
    {{/each}}
</div>
 
{
  "paragraph-textarea": {
    "text": "Je boodschap",
    "tag": "h3",
    "modifier": "feed-header-title-text"
  },
  "reactions": [
    {},
    {},
    {}
  ]
}
  • Content: 
    .react-reply {
    .react-reply-reaction {
        @apply my-12 my-6 md:my-12;
    }
}
  • URL: /components/raw/react-reply/react-reply.css
  • Filesystem Path: src\components\04-organisms\react-reply\react-reply.css
  • Size: 92 Bytes

No notes defined.