Skip to content

Commit 1144d4e

Browse files
samholmessamholmes
authored
Merge pull request #48 from DEVxNetwork/sam/profiles
Nametags
2 parents 7be94b8 + 6a3b830 commit 1144d4e

52 files changed

Lines changed: 7036 additions & 127 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/components/Button.tsx‎

Lines changed: 149 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styled from "styled-components"
55
// Types //
66

77
interface ButtonProps {
8-
variant?: "primary" | "secondary"
8+
variant?: "primary" | "secondary" | "tertiary"
99
size?: "small" | "default"
1010
href?: string
1111
children: React.ReactNode
@@ -14,7 +14,7 @@ interface ButtonProps {
1414
rel?: string
1515
type?: "button" | "submit" | "reset"
1616
disabled?: boolean
17-
onClick?: () => void
17+
onClick?: (e?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
1818
}
1919

2020
// Components //
@@ -71,27 +71,68 @@ export const Button = ({
7171
// Styled Components //
7272

7373
const StyledButton = styled.button<{
74-
$variant: "primary" | "secondary"
74+
$variant: "primary" | "secondary" | "tertiary"
7575
$size: "small" | "default"
7676
}>`
7777
padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
78-
border-radius: 0.25rem;
78+
border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
7979
font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
8080
font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
8181
cursor: pointer;
82-
transition: all 0.2s ease;
82+
transition: all 0.3s ease;
8383
text-decoration: none;
84-
display: inline-block;
84+
display: inline-flex;
85+
align-items: center;
86+
gap: 0.5rem;
8587
border: none;
8688
font-family: inherit;
8789
line-height: 1.5;
88-
background-color: ${(props) => (props.$variant === "primary" ? "white" : "transparent")};
90+
background-color: ${(props) =>
91+
props.$variant === "primary"
92+
? "white"
93+
: props.$variant === "tertiary"
94+
? "transparent"
95+
: "transparent"};
8996
color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
9097
border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
98+
position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
99+
overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
100+
101+
${(props) =>
102+
props.$variant === "tertiary" &&
103+
`
104+
&::before {
105+
content: "";
106+
position: absolute;
107+
top: 0;
108+
left: -100%;
109+
width: 100%;
110+
height: 100%;
111+
background: linear-gradient(
112+
90deg,
113+
transparent,
114+
rgba(255, 255, 255, 0.1),
115+
transparent
116+
);
117+
transition: left 0.5s ease;
118+
}
119+
`}
91120
92121
&:hover:not(:disabled) {
93-
background-color: ${(props) =>
94-
props.$variant === "primary" ? "#ddd" : "rgba(255, 255, 255, 0.1)"};
122+
background-color: ${(props) => {
123+
if (props.$variant === "primary") return "#ddd"
124+
if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
125+
return "rgba(255, 255, 255, 0.1)"
126+
}};
127+
border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
128+
129+
${(props) =>
130+
props.$variant === "tertiary" &&
131+
`
132+
&::before {
133+
left: 100%;
134+
}
135+
`}
95136
}
96137
97138
&:disabled {
@@ -100,49 +141,134 @@ const StyledButton = styled.button<{
100141
}
101142
`
102143

103-
const StyledLink = styled(Link)<{ $variant: "primary" | "secondary"; $size: "small" | "default" }>`
144+
const StyledLink = styled(Link)<{
145+
$variant: "primary" | "secondary" | "tertiary"
146+
$size: "small" | "default"
147+
}>`
104148
padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
105-
border-radius: 0.25rem;
149+
border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
106150
font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
107151
font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
108152
cursor: pointer;
109-
transition: all 0.2s ease;
153+
transition: all 0.3s ease;
110154
text-decoration: none;
111-
display: inline-block;
155+
display: inline-flex;
156+
align-items: center;
157+
gap: 0.5rem;
112158
border: none;
113159
font-family: inherit;
114160
line-height: 1.5;
115-
background-color: ${(props) => (props.$variant === "primary" ? "white" : "transparent")};
161+
background-color: ${(props) =>
162+
props.$variant === "primary"
163+
? "white"
164+
: props.$variant === "tertiary"
165+
? "transparent"
166+
: "transparent"};
116167
color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
117168
border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
169+
position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
170+
overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
171+
172+
${(props) =>
173+
props.$variant === "tertiary" &&
174+
`
175+
&::before {
176+
content: "";
177+
position: absolute;
178+
top: 0;
179+
left: -100%;
180+
width: 100%;
181+
height: 100%;
182+
background: linear-gradient(
183+
90deg,
184+
transparent,
185+
rgba(255, 255, 255, 0.1),
186+
transparent
187+
);
188+
transition: left 0.5s ease;
189+
}
190+
`}
118191
119192
&:hover {
120-
background-color: ${(props) =>
121-
props.$variant === "primary" ? "#ddd" : "rgba(255, 255, 255, 0.1)"};
193+
background-color: ${(props) => {
194+
if (props.$variant === "primary") return "#ddd"
195+
if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
196+
return "rgba(255, 255, 255, 0.1)"
197+
}};
198+
border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
199+
200+
${(props) =>
201+
props.$variant === "tertiary" &&
202+
`
203+
&::before {
204+
left: 100%;
205+
}
206+
`}
122207
}
123208
`
124209

125210
const StyledExternalLink = styled.a<{
126-
$variant: "primary" | "secondary"
211+
$variant: "primary" | "secondary" | "tertiary"
127212
$size: "small" | "default"
128213
}>`
129214
padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
130-
border-radius: 0.25rem;
215+
border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
131216
font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
132217
font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
133218
cursor: pointer;
134-
transition: all 0.2s ease;
219+
transition: all 0.3s ease;
135220
text-decoration: none;
136-
display: inline-block;
221+
display: inline-flex;
222+
align-items: center;
223+
gap: 0.5rem;
137224
border: none;
138225
font-family: inherit;
139226
line-height: 1.5;
140-
background-color: ${(props) => (props.$variant === "primary" ? "white" : "transparent")};
227+
background-color: ${(props) =>
228+
props.$variant === "primary"
229+
? "white"
230+
: props.$variant === "tertiary"
231+
? "transparent"
232+
: "transparent"};
141233
color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
142234
border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
235+
position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
236+
overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
237+
238+
${(props) =>
239+
props.$variant === "tertiary" &&
240+
`
241+
&::before {
242+
content: "";
243+
position: absolute;
244+
top: 0;
245+
left: -100%;
246+
width: 100%;
247+
height: 100%;
248+
background: linear-gradient(
249+
90deg,
250+
transparent,
251+
rgba(255, 255, 255, 0.1),
252+
transparent
253+
);
254+
transition: left 0.5s ease;
255+
}
256+
`}
143257
144258
&:hover {
145-
background-color: ${(props) =>
146-
props.$variant === "primary" ? "#ddd" : "rgba(255, 255, 255, 0.1)"};
259+
background-color: ${(props) => {
260+
if (props.$variant === "primary") return "#ddd"
261+
if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
262+
return "rgba(255, 255, 255, 0.1)"
263+
}};
264+
border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
265+
266+
${(props) =>
267+
props.$variant === "tertiary" &&
268+
`
269+
&::before {
270+
left: 100%;
271+
}
272+
`}
147273
}
148274
`

‎app/components/GiveATalkCTA.tsx‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
11
"use client"
22
import styled from "styled-components"
3-
import { links } from "../siteConfig"
3+
import Link from "next/link"
4+
import { useRouter } from "next/navigation"
5+
import { useState, useEffect } from "react"
6+
import { supabaseClient } from "../../lib/supabaseClient"
47

58
// Components //
69

710
export const GiveATalkCTA: React.FC = () => {
11+
const router = useRouter()
12+
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
13+
14+
useEffect(() => {
15+
const checkAuth = async () => {
16+
const {
17+
data: { user }
18+
} = await supabaseClient.auth.getUser()
19+
setIsAuthenticated(!!user)
20+
}
21+
checkAuth()
22+
}, [])
23+
24+
const handleClick = (e: React.MouseEvent) => {
25+
if (isAuthenticated === false) {
26+
e.preventDefault()
27+
const redirectUrl = encodeURIComponent("/submit-talk")
28+
router.push(`/login?redirect=${redirectUrl}`)
29+
}
30+
}
31+
832
return (
9-
<StyledLink href={links.talkSubmissionUrl} target="_blank" rel="noopener noreferrer">
33+
<StyledLink href="/submit-talk" onClick={handleClick}>
1034
<IconWrapper>
1135
<svg
1236
xmlns="http://www.w3.org/2000/svg"
@@ -27,7 +51,7 @@ export const GiveATalkCTA: React.FC = () => {
2751
)
2852
}
2953

30-
const StyledLink = styled.a`
54+
const StyledLink = styled(Link)`
3155
display: inline-flex;
3256
align-items: center;
3357
padding: 0.5rem 1rem;

0 commit comments

Comments
 (0)