quebec.dev/app/components/developers/card_component.html.erb at e8d6c5a71c4baf0d4c4e81ff340fbb15f8664daa · CodeBoxxTechSchool/quebec.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="bg-white hover:bg-red-50 flex items-stretch m-2">
  <div class="w-full bg-white relative">
    <div class="flex flex-col justify-between relative h-full shadow-lg">
      <div class="flex flex-col justify-center justify-start">

        <div class="flex flex-row">
          <div class="relative w-1/4 max-h-[140px] flex justify-center items-center overflow-hidden" style="border-radius: 0 0 15px 0;">
            <%= render AvatarComponent.new(avatarable: developer, variant: :medium, classes: 'h-full w-full absolute top-0 left-0') %>
          </div>
          <div class="w-3/4">
            <div class="grid grid-rows-12">
              <div class="flex-initial w-full h-7 text-xs space-x-10 grid-rows-1 bg-orange-50 p-1.5">
                <div class="flex flex-row justify-between">
                  <p class="text-left"><%= t('home.show.devs.actively_looking') %></p>
                  <div class="flex flex-row items-center">
                    <%= image_tag 'heart.png', class: 'my-0 mx-1' %>
                    <%= image_tag 'info-circle.png', class: 'my-0 mx-1' %>
                  </div>
                </div>
              </div>
              <div class="flex flex-row text-[8px] px-2 pt-1 grid-rows-1">
                <p class="mr-auto"><%= t('home.show.devs.remote') %></p>
                <p class=""><%= t('home.show.devs.city') %> Québec</p>
              </div>
              <h3 class="grid-rows-4 text-xs p-2 max-h-[42px] overflow-hidden text-ellipsis"><%= developer.hero %>
              </h3>
              <h4 class="grid-rows-4 text-[10px] p-2 max-h-[67px] overflow-hidden text-ellipsis"><%= developer.bio %>
              </h4>
            </div>
          </div>
        </div>
        <div class="w-100 flex flex-row py-1">
            <%#= render Developers::BadgesComponent.new(developer) %>
            <%= render Developers::SpecialtiesComponent.new(developer.specialties) %>
        </div>
      </div>
      <%= button_to t('home.show.devs.hire'), developer, method: :get, class: "bg-red-600 text-white hover:bg-red-800 py-3 w-full after:absolute after:inset-0" %>
    </div>
  </div>
</div>