How do you deal with duplicated frontend views?

I have a big project, and many components are almost de same (just hide or show actions, or change positions, maybe an style or two).

How do you deal with this duplicated views? It feels gross to copy and paste here and there.

Examples:


<!-- Small widget -->
<div class="col-6 col-lg-3">
  <div class="card card-body text-center bg-primary">
    <div class="fs-40 fw-100">+100</div>
    <div>Article</div>
  </div>
</div>


<!-- same small widget, but change color and hide content -->
<div class="col-6 col-lg-3">
  <div class="card card-body text-center bg-info">
    <div>Article</div>
  </div>
</div>

Just include are not enough for me:

  @include('dashboard.atoms.assessments', ['assessments' => $dashboard->assessments()])

Pass a lot of variables is gross.

Is there an packaga that handler this type of things?

jobcerto

8 years ago

Level 39

Ah, this is a small one, but i have a lot of huge compontens: This component i use in many places, but hide things, remove things, edit internal views for add uggly ifs for hide contents are gross..


<div class="card">
  <div class="card-header pt-0 pb-0 pl-0">
    @include('assessments.tasks.atoms.header')

    @if (Route::is('assessments.tasks.index'))
    <a class="btn btn-xs btn-light" href="{{ route('assessments.tasks.index', $assessment) }}">Ver plano de ação</a>
    @endif
  
    @include('assessments.tasks.atoms.actions')

  </div>

  
  <table class="table table-responsive table-striped table-lg v-center">
    <thead>
      <tr class="bg-secondary">
        <th class="w-60px">#</th>
        <th>Tarefa</th>
        <th>Prazo</th>
        <th>Situação</th>
        <th class="text-right w-150px">Ação</th>
      </tr>
    </thead>
    <tbody>
      @foreach ($tasks as $task)
      @include('assessments.tasks.atoms.task', ['task' => $task])
    @endforeach
  </tbody>
</table>

</div>

Please or to participate in this conversation.