Skip to content

Commit afbf42d

Browse files
honeywellfanhoneywellfan
committed
more aligned with the figma
1 parent 34cc68e commit afbf42d

4 files changed

Lines changed: 266 additions & 75 deletions

File tree

‎app/people/[slug]/page.tsx‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,39 +15,75 @@ export function urlFor(source: typeof SanityImageSource) {
1515
}
1616

1717
const DATASET_QUERY = `*[_type == "peopleType" && slug.current == $slug][0]
18-
{_id, fullname, image, recentwork, jobtitles, interests, slug}`;
18+
{_id, fullname, email, bio, image, recentwork, jobtitles, interests, slug}`;
1919

2020
const options = { next: { revalidate: 30 } };
2121

2222
export default async function SanityExampleDataset({
23-
params,
23+
params,
2424
}: {
25-
params: Promise<{ slug: string }>;
25+
params: Promise<{ slug: string }>;
2626
}) {
27-
const { slug } = await params;
28-
const dataset = await client.fetch<SanityDocument | null>(
29-
DATASET_QUERY,
30-
{ slug },
31-
options
32-
);
27+
const { slug } = await params;
28+
const dataset = await client.fetch<SanityDocument | null>(
29+
DATASET_QUERY,
30+
{ slug },
31+
options,
32+
);
3333

34-
if (!dataset) notFound();
34+
if (!dataset) notFound();
3535

3636
return (
37-
<div>
38-
<h1>{dataset.fullname}</h1>
39-
<Image
40-
alt="generic profile image"
41-
src={urlFor(dataset.image).url()}
42-
width={100}
43-
height={100}
44-
/>
45-
<p>{dataset.jobtitles.join(", ")}</p>
46-
<p>{dataset.interests.join(", ")}</p>
47-
48-
<Link className="hover:underline" href={`${dataset.recentwork}`}>
49-
<p>Title of most recent work</p>
50-
</Link>
37+
<div className="">
38+
<div className="flex bg-gray-100">
39+
<div className="max-w-1/2">
40+
<h1 className="text-7xl mt-[5rem] ml-[6rem]">{dataset.fullname}</h1>
41+
<p className="text-gray-500 mt-[0.6rem] ml-[6rem]">
42+
{dataset.jobtitles.join(", ")}
43+
</p>
44+
<p className="mt-[0.5rem] mt-[1.5rem] ml-[6rem]">
45+
{" "}
46+
Email:{" "}
47+
<a className="hover:underline" href={`mailto:${dataset.email}`}>
48+
{dataset.email}
49+
</a>
50+
</p>
51+
</div>
52+
<div className=" mb-[5rem] mt-[5rem] ml-auto mr-[5rem]">
53+
<Image
54+
alt="generic profile image"
55+
src={urlFor(dataset.image).url()}
56+
width={400}
57+
height={400}
58+
/>
59+
</div>
60+
</div>
61+
<div className="flex">
62+
<div>
63+
<hr
64+
style={{
65+
width: "20rem",
66+
marginTop: "6rem",
67+
marginLeft: "6rem",
68+
marginBottom: "0.5rem",
69+
}}
70+
></hr>
71+
<p className="text-lg mt-[1rem] ml-[6rem]">
72+
{dataset.interests.join(", ")}
73+
</p>
74+
</div>
75+
<div>
76+
<p className="text-lg mt-[6rem] mb-[1rem] ml-[6rem] mr-[5rem]">
77+
{dataset.bio}
78+
</p>
79+
<a
80+
className="font-bold text-lg ml-[6rem] hover:underline"
81+
href={`${dataset.recentwork}`}
82+
>
83+
Their most recent work
84+
</a>
85+
</div>
86+
</div>
5187
</div>
5288
);
5389
}

‎app/people/page.tsx‎

Lines changed: 193 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { defineQuery } from "next-sanity";
66
import { client } from "@/sanity/lib/client";
77
import createImageUrlBuilder from "@sanity/image-url";
88
import type SanityImageSource from "@sanity/image-url";
9+
import { relative } from "path";
910

1011
// Create an image URL builder using the client
1112
const builder = createImageUrlBuilder(client);
@@ -17,7 +18,7 @@ export function urlFor(source: typeof SanityImageSource) {
1718

1819
const DEFAULT_QUERY = `*[
1920
_type == "peopleType"
20-
]|order(fullname desc){_id, fullname, image, recentwork, jobtitles, interests, slug}`;
21+
]|order(fullname asc){_id, fullname, image, email, recentwork, jobtitles, interests, slug}`;
2122

2223
const counter = defineQuery(`count(*[_type == 'peopleType'])`);
2324

@@ -54,60 +55,204 @@ export default async function People() {
5455
const interests = Array.from(new Set(interestsflat));
5556
interests.sort();
5657

58+
const titlesall = [datasets.map((person) => person.jobtitles)];
59+
const titlesflat = titlesall.flat(Infinity);
60+
const titles = Array.from(new Set(titlesflat));
61+
titles.sort();
62+
5763
return (
5864
<div>
5965
<div>
60-
<p>BANNER PHOTO HERE</p>
61-
<h1>Experts</h1>
62-
<h2>
63-
The Conflict Research and Security Studies Lab brings together experts
64-
across the disciplines.
65-
</h2>
66-
<div>
67-
<fieldset>
68-
{interests.map((interest) => (
69-
<label key={`${interest} button label`}>
70-
<input
71-
className="checkboxes"
72-
id={`${interest} checkbox`}
73-
name="checkbox"
74-
key={`${interest} checkbox`}
75-
type="checkbox"
76-
/>
77-
{interest}
78-
</label>
79-
))}
80-
</fieldset>
66+
<div
67+
style={{
68+
height: "15rem",
69+
background: "pink",
70+
display: "flex",
71+
flexDirection: "column",
72+
position: "relative",
73+
// alignItems: "flex-end",
74+
}}
75+
>
76+
<h1
77+
style={{
78+
position: "absolute",
79+
bottom: "3rem",
80+
marginLeft: "2rem",
81+
}}
82+
className="text-4xl"
83+
>
84+
Experts
85+
</h1>
86+
<h2
87+
style={{
88+
position: "absolute",
89+
bottom: "1rem",
90+
marginLeft: "2rem",
91+
}}
92+
className="text-xl"
93+
>
94+
The Conflict Research and Security Studies Lab brings together
95+
experts across the disciplines.
96+
</h2>
8197
</div>
82-
<p>
83-
{peoplecount} {plural}{" "}
98+
<p
99+
className="text-lg"
100+
style={{ marginLeft: "3rem", marginTop: "2rem" }}
101+
>
102+
<b>{peoplecount}</b> {plural}{" "}
84103
</p>
85-
<ul className="flex flex-col gap-y-4">
86-
{datasets.map((person) => (
87-
<li className="personlist" key={person._id}>
88-
<Link
89-
className="hover:underline"
90-
href={`/people/${person.slug.current}`}
91-
>
92-
<h2 className="font-semibold">{person.name}</h2>
93-
<p>{person.fullname}</p>
94-
</Link>
95-
<Image
96-
alt="generic profile image"
97-
src={urlFor(person.image).url()}
98-
width={100}
99-
height={100}
104+
<div
105+
style={{
106+
display: "flex",
107+
justifyContent: "center",
108+
alignItems: "center",
109+
marginTop: "2rem",
110+
}}
111+
>
112+
<input
113+
style={{
114+
width: "88.5rem",
115+
height: "3rem",
116+
textIndent: "2rem",
117+
}}
118+
className="border-solid border bg-gray-50"
119+
type="search"
120+
placeholder="Search"
121+
/>
122+
<button
123+
style={{ width: "3rem", height: "3rem" }}
124+
className="group absolute right-[3rem] hover:bg-[#a51c30]"
125+
>
126+
<svg
127+
width="20"
128+
height="20"
129+
viewBox="0 0 20 20"
130+
fill="none"
131+
xmlns="http://www.w3.org/2000/svg"
132+
className="relative -right-[0.75rem] "
133+
>
134+
<path
135+
d="M19 19L14.66 14.66M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z"
136+
stroke="#979696"
137+
strokeWidth="2"
138+
strokeLinecap="round"
139+
strokeLinejoin="round"
140+
className="group-hover:stroke-gray-50"
100141
/>
101-
<p>{person.jobtitles.join(", ")}</p>
102-
<p>{person.interests.join(", ")}</p>
142+
</svg>
143+
</button>
144+
</div>
145+
<div style={{ display: "flex" }}>
146+
<div style={{ marginLeft: "3rem", marginTop: "2rem" }}>
147+
<h1 className="text-lg">Filters</h1>
148+
<hr
149+
style={{
150+
width: "15rem",
151+
marginTop: "0.1rem",
152+
// marginBottom: "0.1rem",
153+
}}
154+
></hr>
155+
<fieldset>
156+
{interests.map((interest) => (
157+
<label
158+
className="text-base"
159+
style={{
160+
display: "block",
161+
clear: "left",
162+
marginTop: "0.1rem",
163+
}}
164+
key={`${interest} button label`}
165+
>
166+
<input
167+
style={{
168+
clear: "left",
169+
marginRight: "0.5rem",
170+
marginTop: "0.5rem",
171+
}}
172+
className="checkboxes"
173+
id={`${interest} checkbox`}
174+
name="checkbox"
175+
key={`${interest} checkbox`}
176+
type="checkbox"
177+
/>
178+
{interest}
179+
</label>
180+
))}
181+
</fieldset>
182+
<hr
183+
style={{
184+
width: "15rem",
185+
marginTop: "0.2rem",
186+
}}
187+
></hr>
188+
<fieldset>
189+
{titles.map((title) => (
190+
<label
191+
style={{
192+
display: "block",
193+
clear: "left",
194+
marginTop: "0.1rem",
195+
}}
196+
key={`${title} button label`}
197+
>
198+
<input
199+
style={{
200+
clear: "left",
201+
marginRight: "0.5rem",
202+
marginTop: "0.5rem",
203+
}}
204+
className="checkboxes"
205+
id={`${title} checkbox`}
206+
name="checkbox"
207+
key={`${title} checkbox`}
208+
type="checkbox"
209+
/>
210+
{title}
211+
</label>
212+
))}
213+
</fieldset>
214+
</div>
215+
<div
216+
className="allpeople"
217+
style={{ marginTop: "2rem", marginLeft: "2rem" }}
218+
>
219+
<div className="flex flex-col gap-y-4">
220+
{datasets.map((person) => (
221+
<div
222+
style={{ display: "flex", alignItems: "center" }}
223+
className="personlist"
224+
key={person._id}
225+
>
226+
<div>
227+
{" "}
228+
<Image
229+
alt="generic profile image"
230+
src={urlFor(person.image).url()}
231+
width={150}
232+
height={150}
233+
/>
234+
</div>
235+
<div style={{ marginLeft: "1rem" }}>
236+
<Link
237+
className="hover:underline"
238+
href={`/people/${person.slug.current}`}
239+
>
240+
<b className="text-lg">{person.fullname}</b>
241+
</Link>
103242

104-
<Link className="hover:underline" href={`${person.recentwork}`}>
105-
<p>Title of most recent work</p>
106-
</Link>
107-
</li>
108-
))}
109-
</ul>
243+
<p className="text-gray-500">
244+
{person.jobtitles.join(", ")}
245+
</p>
246+
<p style={{ marginTop: "1rem" }}>
247+
{person.interests.join(", ")}
248+
</p>
249+
</div>
250+
</div>
251+
))}
252+
</div>
253+
</div>
254+
</div>
110255
</div>
111256
</div>
112257
);
113-
}
258+
}

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sanity/schemaTypes/peopleType.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ export const peopleType = defineType({
1717
type: "image",
1818
validation: (Rule) => Rule.required(),
1919
}),
20+
defineField({
21+
name: "email",
22+
type: "string",
23+
validation: (Rule) => Rule.required(),
24+
}),
25+
defineField({
26+
name: "bio",
27+
type: "string",
28+
validation: (Rule) => Rule.required(),
29+
}),
2030
defineField({
2131
name: "recentwork",
2232
type: "url",

0 commit comments

Comments
 (0)