mohdashraf010897

   <ReactiveBase
      app="good-books-ds"
      url="https://6a0ae3a3a8d4:6a3f508d-169b-4ed7-9680-20658120930f@appbase-demo-ansible-abxiydt-arc.searchbase.io"
      :enableAppbase="true"
    >
      <h1>Hello from ReactiveBase 👋</h1>
    </ReactiveBase>

mohdashraf010897

 <ReactiveBase
          app="movies-demo-app"
          url="https://81719ecd9552:e06db001-a6d8-4cc2-bc43-9c15b1c0c987@appbase-demo-ansible-abxiydt-arc.searchbase.io"
          enableAppbase
          theme={{
            typography: {
              fontFamily:
                '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif',
              fontSize: "16px",
            },

mohdashraf010897

<SearchBox
                componentId="mainSearch"
                dataField={["original_title", "original_title.search"]}
                categoryField="genres.keyword"
                className="search-bar"
                queryFormat="and"
                placeholder="Search for movies..."
                iconPosition="left"
                autosuggest={true}
                filterLabel="search"

mohdashraf010897

          <ReactiveList
            componentId="SearchResult"
            data-field="original_title.raw"
            :pagination="true"
            :from="0"
            :size="8"
            :showResultStats="true"
            :react="{ and: ['Ratings', 'Authors', 'search-box'] }"
            :innerClass="{ list: 'books-container', poweredBy: 'appbase' }"
          >

mohdashraf010897

<ReactiveList
              componentId="results"
              :includeFields="['*']"
              dataField="name.keyword"
              :pagination="true"
              :from="0"
              :size="6"
              :innerClass="{
                list: 'result-list-container',
                pagination: 'result-list-pagination',

mohdashraf010897

<RangeSlider
  dataField="stars_num"
  componentId="stars"
  title="Repo Stars"
  :range="{
    start: 0,
    end: 300000
  }"
  :defaultSelected="{
    start: 0,

mohdashraf010897

<SearchBox
            componentId="search-box"
            iconPosition="right"
            :dataField="[
              'name',
              'description',
              'name.search',
              'fullname',
              'owner',
              'topics',

mohdashraf010897

 <div slot="render" slot-scope="{ loading, error, data }">
                <div v-if="loading">Fetching Results.</div>
                <div v-if="Boolean(error)">
                  Something went wrong! Error details
                  {{ JSON.stringify(error) }}
                </div>

                <div v-bind:key="item._id" v-for="item in data">
                  <div key="{{item.name}}" class="result-item">
                    <div class="flex align-center result-card-header">

mohdashraf010897

componentId="search-box"
        iconPosition="right"
        :dataField="[
          'original_title',
          'original_title.search',
          'authors.search',
          'authors.raw',
          'authors.autosuggest',
          'authors',
        ]"

mohdashraf010897

<template>
  <section class="container">
    <ReactiveBase
      app="gitxplore-app"
      credentials="0f448043059d:a4264120-cd7a-4574-a449-2c5df0523cb1"
      url="https://appbase-demo-ansible-abxiydt-arc.searchbase.io"
      enableAppbase
    >
    </ReactiveBase>
  </section>