Packages

phoenix_kit

1.7.21
1.7.210 1.7.209 1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
224 Versions
37 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web live modules connections connections.html.heex
Raw

lib/phoenix_kit_web/live/modules/connections/connections.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title="Connections"

  current_path={@url_path}

  project_title={@project_title}

>

  <div class="container flex flex-col mx-auto px-4 py-6">

    <%!-- Header Section --%>

    <header class="w-full relative mb-6">

      <%!-- Back Button (Left aligned) --%>

      <.link

        navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}

        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"

      >

        <.icon name="hero-arrow-left" class="w-4 h-4" /> Back to Modules

      </.link>



      <%!-- Title Section --%>

      <div class="text-center">

        <h1 class="text-4xl font-bold text-base-content mb-3">Connections</h1>

        <p class="text-lg text-base-content">

          Social relationships overview and management

        </p>

      </div>

    </header>



    <%!-- Main Content --%>

    <div class="max-w-4xl mx-auto space-y-8">

      <%!-- Stats Overview --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body">

          <h2 class="card-title text-2xl mb-4">

            <.icon name="hero-chart-bar" class="w-6 h-6" /> Statistics

          </h2>

          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

            <div class="stat bg-primary/10 rounded-lg p-4">

              <div class="stat-title text-xs">Follows</div>

              <div class="stat-value text-2xl text-primary">{@stats.follows}</div>

              <div class="stat-desc">One-way follows</div>

            </div>

            <div class="stat bg-success/20 rounded-lg p-4">

              <div class="stat-title text-xs">Connections</div>

              <div class="stat-value text-2xl text-success">{@stats.connections}</div>

              <div class="stat-desc">Mutual connections</div>

            </div>

            <div class="stat bg-warning/20 rounded-lg p-4">

              <div class="stat-title text-xs">Pending</div>

              <div class="stat-value text-2xl text-warning">{@stats.pending}</div>

              <div class="stat-desc">Awaiting response</div>

            </div>

            <div class="stat bg-error/20 rounded-lg p-4">

              <div class="stat-title text-xs">Blocks</div>

              <div class="stat-value text-2xl text-error">{@stats.blocks}</div>

              <div class="stat-desc">Active blocks</div>

            </div>

          </div>

        </div>

      </div>



      <%!-- Module Settings --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body">

          <h2 class="card-title text-2xl mb-4">

            <.icon name="hero-cog-6-tooth" class="w-6 h-6" /> Module Configuration

          </h2>



          <%!-- Enable/Disable --%>

          <div class="form-control">

            <label class="label cursor-pointer justify-start gap-4">

              <input

                type="checkbox"

                class="toggle toggle-primary"

                checked={@enabled}

                phx-click="toggle_enabled"

              />

              <div>

                <span class="label-text font-medium">Enable Connections Module</span>

                <p class="text-sm text-base-content/50">

                  When disabled, the connections interface will not be accessible

                </p>

              </div>

            </label>

          </div>

        </div>

      </div>



      <%!-- Relationship Types Info --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body">

          <h2 class="card-title text-2xl mb-4">

            <.icon name="hero-information-circle" class="w-6 h-6" /> Relationship Types

          </h2>



          <div class="space-y-4">

            <%!-- Follows --%>

            <div class="p-4 bg-primary/5 rounded-lg">

              <div class="flex items-center gap-2 mb-2">

                <.icon name="hero-user-plus" class="w-5 h-5 text-primary" />

                <span class="font-semibold text-primary">Follows</span>

              </div>

              <p class="text-sm text-base-content/70">

                One-way relationships where User A follows User B without requiring consent.

                Similar to Twitter/Instagram follows.

              </p>

            </div>



            <%!-- Connections --%>

            <div class="p-4 bg-success/5 rounded-lg">

              <div class="flex items-center gap-2 mb-2">

                <.icon name="hero-users" class="w-5 h-5 text-success" />

                <span class="font-semibold text-success">Connections</span>

              </div>

              <p class="text-sm text-base-content/70">

                Two-way mutual relationships that require acceptance from both parties.

                Similar to LinkedIn connections or Facebook friends.

              </p>

            </div>



            <%!-- Blocks --%>

            <div class="p-4 bg-error/5 rounded-lg">

              <div class="flex items-center gap-2 mb-2">

                <.icon name="hero-no-symbol" class="w-5 h-5 text-error" />

                <span class="font-semibold text-error">Blocks</span>

              </div>

              <p class="text-sm text-base-content/70">

                Prevents all interaction between users. Blocking removes any existing

                follows and connections between the users.

              </p>

            </div>

          </div>

        </div>

      </div>



      <%!-- API Usage --%>

      <div class="card bg-base-100 shadow-xl">

        <div class="card-body">

          <h2 class="card-title text-2xl mb-4">

            <.icon name="hero-code-bracket" class="w-6 h-6" /> Public API

          </h2>



          <p class="text-sm text-base-content/70 mb-4">

            The Connections module provides a public API that parent applications can use

            to integrate social features into their own views and components.

          </p>



          <div class="mockup-code text-sm">

            <pre data-prefix="$"><code>alias PhoenixKit.Modules.Connections</code></pre>

            <pre data-prefix=""><code></code></pre>

            <pre data-prefix="#" class="text-warning"><code> Follows</code></pre>

            <pre data-prefix=">"><code>Connections.follow(current_user, target_user)</code></pre>

            <pre data-prefix=">"><code>Connections.following?(current_user, target_user)</code></pre>

            <pre data-prefix=">"><code>Connections.list_followers(user)</code></pre>

            <pre data-prefix=""><code></code></pre>

            <pre data-prefix="#" class="text-success"><code> Connections</code></pre>

            <pre data-prefix=">"><code>Connections.request_connection(user_a, user_b)</code></pre>

            <pre data-prefix=">"><code>Connections.connected?(user_a, user_b)</code></pre>

            <pre data-prefix=""><code></code></pre>

            <pre data-prefix="#" class="text-info"><code> Full relationship status</code></pre>

            <pre data-prefix=">"><code>Connections.get_relationship(user_a, user_b)</code></pre>

          </div>

        </div>

      </div>

    </div>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>