Skip to content

Commit 5e307c5

Browse files
rafaelrdealmeidarafaelrdealmeida
committed
ajuste icone unesp portal docente
1 parent 642ff98 commit 5e307c5

File tree

1 file changed

+93
-147
lines changed

1 file changed

+93
-147
lines changed

‎src/components/EquipeTabs.astro‎

Lines changed: 93 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const {
66
layout = "pesquisador",
77
texts = {},
88
} = Astro.props;
9-
console.log("TEXTOS RECEBIDOS:", texts);
9+
1010
import { getCollection } from "astro:content";
1111
1212
const membrosCollection = await getCollection("membros");
@@ -60,158 +60,104 @@ const categoriasTodas = Array.from(
6060
});
6161
});
6262
</script>
63+
6364
<div class="tabs tabs-boxed justify-center mb-10">
6465
<button class="tab tab-active" data-tab="todos">Todos</button>
65-
{
66-
ativos.map(([categoria]) => (
67-
<button class="tab" data-tab={categoria}>
68-
{categoria}
69-
</button>
70-
))
71-
}
66+
{ativos.map(([categoria]) => (
67+
<button class="tab" data-tab={categoria}>{categoria}</button>
68+
))}
7269
<button class="tab" data-tab="inativos">Já passaram por aqui</button>
7370
</div>
7471

75-
<!-- Membros ativos -->
76-
{
77-
ativos.map(([categoria, membros]) => (
78-
<div data-categoria={categoria} class="mb-12 flex flex-col gap-12">
79-
<h3
80-
id={categoria.toLowerCase().replace(/\s+/g, "-")}
81-
class="text-2xl font-semibold text-primary mt-8 mb-6"
82-
>
83-
{categoria}
84-
</h3>
85-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
86-
{membros.map((membro) => {
87-
const slug = getSlug(membro);
88-
const temPagina = membrosDisponiveis.has(slug);
89-
return (
90-
<div class="relative card bg-base-100 text-base-content shadow-md hover:shadow-lg transition-shadow rounded-xl overflow-hidden p-6 pt-8 flex flex-col items-center text-center">
91-
{temPagina ? (
92-
<a href={`/${lang}/${slug}`} class="absolute top-1 right-2 bg-primary text-white text-xs font-semibold px-2 py-1 rounded shadow z-10">
93-
{texts.buttonPersonalPage}
94-
</a>
95-
) : null}
96-
97-
{temPagina ? (
98-
<a href={`/${lang}/${slug}`}>
99-
<img
100-
src={membro.foto}
101-
alt={membro.nome}
102-
class="w-48 h-48 object-cover rounded-xl mb-4 hover:opacity-80 transition"
103-
/>
104-
</a>
105-
) : (
106-
<img
107-
src={membro.foto}
108-
alt={membro.nome}
109-
class="w-48 h-48 object-cover rounded-xl mb-4"
110-
/>
111-
)}
112-
{membro.redes && membro.redes.length > 0 && (
113-
<div class="flex justify-center space-x-4 mb-2">
114-
{membro.redes.slice(0, 3).map((rede) => (
115-
<a
116-
href={rede.url}
117-
target="_blank"
118-
rel="noopener"
119-
class="hover:scale-110 transition-transform"
120-
>
121-
<img src={rede.icone} alt={rede.tipo} class="w-6 h-6" />
122-
</a>
123-
))}
124-
</div>
125-
)}
126-
<h3 class="text-[20px] font-display text-primary mb-1">
127-
{membro.nome}
128-
</h3>
129-
<p class="text-[12px] text-neutral mb-1">{membro.cargo}</p>
130-
<p class="text-[12px] text-base-content">{membro.descricao}</p>
131-
{membro.contribuicao && (
132-
<p class="text-[12px] italic mt-2 text-base-content">
133-
{membro.contribuicao}
134-
</p>
135-
)}
136-
</div>
137-
);
138-
})}
139-
</div>
72+
{ativos.map(([categoria, membros]) => (
73+
<div data-categoria={categoria} class="mb-12 flex flex-col gap-12">
74+
<h3 id={categoria.toLowerCase().replace(/\s+/g, "-")} class="text-2xl font-semibold text-primary mt-8 mb-6">
75+
{categoria}
76+
</h3>
77+
78+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
79+
{membros.map((membro) => {
80+
const slug = getSlug(membro);
81+
const temPagina = membrosDisponiveis.has(slug);
82+
return (
83+
<div class="relative card bg-base-100 text-base-content shadow-md hover:shadow-lg transition-shadow rounded-xl overflow-hidden p-6 pt-8 flex flex-col items-center text-center">
84+
{temPagina && (
85+
<a href={`/${lang}/${slug}`} class="absolute top-1 right-2 bg-primary text-white text-xs font-semibold px-2 py-1 rounded shadow z-10">
86+
{texts.buttonPersonalPage}
87+
</a>
88+
)}
89+
90+
{temPagina ? (
91+
<a href={`/${lang}/${slug}`}>
92+
<img src={membro.foto} alt={membro.nome} class="w-48 h-48 object-cover rounded-xl mb-4 hover:opacity-80 transition" />
93+
</a>
94+
) : (
95+
<img src={membro.foto} alt={membro.nome} class="w-48 h-48 object-cover rounded-xl mb-4" />
96+
)}
97+
98+
{membro.redes && membro.redes.length > 0 && (
99+
<div class="flex justify-center space-x-4 mb-2">
100+
{membro.redes.slice(0, 3).map((rede) => (
101+
<a href={rede.url} target="_blank" rel="noopener" class="hover:scale-110 transition-transform">
102+
<img src={rede.icone} alt={rede.tipo} class="max-h-6 max-w-12 object-contain" loading="lazy" />
103+
</a>
104+
))}
105+
</div>
106+
)}
107+
108+
<h3 class="text-[20px] font-display text-primary mb-1">{membro.nome}</h3>
109+
<p class="text-[12px] text-neutral mb-1">{membro.cargo}</p>
110+
<p class="text-[12px] text-base-content">{membro.descricao}</p>
111+
{membro.contribuicao && (
112+
<p class="text-[12px] italic mt-2 text-base-content">{membro.contribuicao}</p>
113+
)}
114+
</div>
115+
);
116+
})}
140117
</div>
141-
))
142-
}
118+
</div>
119+
))}
143120

144-
<!-- Membros inativos com destaque e paginação -->
145121
<div id="inativos-tab" style="display: none;" class="space-y-16 flex flex-col">
146-
{
147-
Array.from({ length: Math.ceil(inativos.length / 21) }).map(
148-
(_, pageIndex) => (
149-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
150-
{inativos
151-
.slice(pageIndex * 21, (pageIndex + 1) * 21)
152-
.map((membro) => {
153-
const slug = getSlug(membro);
154-
const temPagina = membrosDisponiveis.has(slug);
155-
return (
156-
<div class="relative card bg-base-100 text-base-content shadow-md hover:shadow-lg transition-shadow rounded-xl overflow-hidden p-6 flex flex-col items-center text-center">
157-
{temPagina ? (
158-
<a
159-
href={`/${lang}/${slug}`}
160-
class="absolute top-3 right-3 bg-primary text-white text-xs font-semibold px-2 py-1 rounded z-10"
161-
>
162-
{texts.buttonPersonalPage}
163-
</a>
164-
) : null}
165-
{temPagina ? (
166-
<a href={`/${lang}/${slug}`}>
167-
<img
168-
src={membro.foto}
169-
alt={membro.nome}
170-
class="w-48 h-48 object-cover rounded-xl mb-4 hover:opacity-80 transition"
171-
/>
172-
</a>
173-
) : (
174-
<img
175-
src={membro.foto}
176-
alt={membro.nome}
177-
class="w-48 h-48 object-cover rounded-xl mb-4"
178-
/>
179-
)}
180-
{membro.redes && membro.redes.length > 0 && (
181-
<div class="flex justify-center space-x-4 mb-2">
182-
{membro.redes.slice(0, 3).map((rede) => (
183-
<a
184-
href={rede.url}
185-
target="_blank"
186-
rel="noopener"
187-
class="hover:scale-110 transition-transform"
188-
>
189-
<img
190-
src={rede.icone}
191-
alt={rede.tipo}
192-
class="w-6 h-6"
193-
/>
194-
</a>
195-
))}
196-
</div>
197-
)}
198-
<h3 class="text-[20px] font-display text-primary mb-1">
199-
{membro.nome}
200-
</h3>
201-
<p class="text-[12px] text-neutral mb-1">{membro.cargo}</p>
202-
<p class="text-[12px] text-base-content">
203-
{membro.descricao}
204-
</p>
205-
{membro.contribuicao && (
206-
<p class="text-[12px] italic mt-2 text-base-content">
207-
{membro.contribuicao}
208-
</p>
209-
)}
210-
</div>
211-
);
212-
})}
213-
</div>
214-
),
215-
)
216-
}
122+
{Array.from({ length: Math.ceil(inativos.length / 21) }).map((_, pageIndex) => (
123+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
124+
{inativos.slice(pageIndex * 21, (pageIndex + 1) * 21).map((membro) => {
125+
const slug = getSlug(membro);
126+
const temPagina = membrosDisponiveis.has(slug);
127+
return (
128+
<div class="relative card bg-base-100 text-base-content shadow-md hover:shadow-lg transition-shadow rounded-xl overflow-hidden p-6 flex flex-col items-center text-center">
129+
{temPagina && (
130+
<a href={`/${lang}/${slug}`} class="absolute top-3 right-3 bg-primary text-white text-xs font-semibold px-2 py-1 rounded z-10">
131+
{texts.buttonPersonalPage}
132+
</a>
133+
)}
134+
{temPagina ? (
135+
<a href={`/${lang}/${slug}`}>
136+
<img src={membro.foto} alt={membro.nome} class="w-48 h-48 object-cover rounded-xl mb-4 hover:opacity-80 transition" />
137+
</a>
138+
) : (
139+
<img src={membro.foto} alt={membro.nome} class="w-48 h-48 object-cover rounded-xl mb-4" />
140+
)}
141+
142+
{membro.redes && membro.redes.length > 0 && (
143+
<div class="flex justify-center space-x-4 mb-2">
144+
{membro.redes.slice(0, 3).map((rede) => (
145+
<a href={rede.url} target="_blank" rel="noopener" class="hover:scale-110 transition-transform">
146+
<img src={rede.icone} alt={rede.tipo} class="max-h-6 max-w-12 object-contain" loading="lazy" />
147+
</a>
148+
))}
149+
</div>
150+
)}
151+
152+
<h3 class="text-[20px] font-display text-primary mb-1">{membro.nome}</h3>
153+
<p class="text-[12px] text-neutral mb-1">{membro.cargo}</p>
154+
<p class="text-[12px] text-base-content">{membro.descricao}</p>
155+
{membro.contribuicao && (
156+
<p class="text-[12px] italic mt-2 text-base-content">{membro.contribuicao}</p>
157+
)}
158+
</div>
159+
);
160+
})}
161+
</div>
162+
))}
217163
</div>

0 commit comments

Comments
 (0)