FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
proxytechsupport-nextjs/components/BlogArticleShell.tsx at main · techdeepcode/proxytechsupport-nextjs · GitHub
techdeepcode
/
proxytechsupport-nextjs
Public
Notifications
You must be signed in to change notification settings
Fork
0
Star
0
Code
Issues
0
Pull requests
0
Actions
Projects
Security and quality
0
Insights
Additional navigation options
Code
Issues
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
proxytechsupport-nextjs
/
components
/
BlogArticleShell.tsx
Copy path
More file actions
More file actions
Latest commit
History
History
History
107 lines (104 loc) · 3.22 KB
Breadcrumbs
proxytechsupport-nextjs
/
components
/
BlogArticleShell.tsx
Copy path
File metadata and controls
107 lines (104 loc) · 3.22 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import
type
{
ReactNode
}
from
'react'
;
export
type
BlogArticleShellProps
=
{
children
:
ReactNode
;
/** default = subtle card wrap; feature = dark hero band + tags */
variant
?:
'default'
|
'feature'
;
hero
?:
{
eyebrow
?:
string
;
subtitle
?:
string
;
tags
?:
string
[
]
;
}
;
}
;
/**
* Wraps blog article HTML/TSX bodies for richer layouts than flat markdown prose.
*/
export
default
function
BlogArticleShell
(
{
children
,
variant
=
'default'
,
hero
}
:
BlogArticleShellProps
)
{
if
(
variant
===
'feature'
&&
hero
)
{
return
(
<
div
className
=
"blog-article-shell blog-article-shell--feature"
>
<
div
className
=
"blog-article-shell-hero"
style
=
{
{
margin
:
'-0.25rem -0.5rem 1.75rem'
,
padding
:
'2rem 1.25rem 1.75rem'
,
borderRadius
:
'var(--pts-card-radius)'
,
background
:
'linear-gradient(135deg, var(--pts-nav-bg) 0%, var(--pts-surface-dark-raised) 55%, var(--pts-dashboard-bg) 100%)'
,
border
:
'1px solid rgba(0, 223, 130, 0.2)'
,
boxShadow
:
'var(--pts-shadow-lp)'
,
}
}
>
{
hero
.
eyebrow
&&
(
<
p
style
=
{
{
fontSize
:
'0.72rem'
,
letterSpacing
:
'0.14em'
,
textTransform
:
'uppercase'
,
color
:
'var(--pts-accent)'
,
fontWeight
:
700
,
marginBottom
:
'0.75rem'
,
}
}
>
{
hero
.
eyebrow
}
</
p
>
)
}
{
hero
.
subtitle
&&
(
<
p
style
=
{
{
fontSize
:
'1.05rem'
,
lineHeight
:
1.65
,
color
:
'rgba(255,255,255,0.86)'
,
maxWidth
:
'44rem'
,
fontWeight
:
500
,
}
}
>
{
hero
.
subtitle
}
</
p
>
)
}
{
hero
.
tags
&&
hero
.
tags
.
length
>
0
&&
(
<
div
style
=
{
{
display
:
'flex'
,
flexWrap
:
'wrap'
,
gap
:
'0.45rem'
,
marginTop
:
'1.1rem'
}
}
>
{
hero
.
tags
.
map
(
(
t
)
=>
(
<
span
key
=
{
t
}
style
=
{
{
fontSize
:
'0.68rem'
,
letterSpacing
:
'0.06em'
,
textTransform
:
'uppercase'
,
padding
:
'0.25rem 0.6rem'
,
borderRadius
:
'999px'
,
background
:
'rgba(0, 223, 130, 0.12)'
,
color
:
'var(--pts-accent)'
,
border
:
'1px solid rgba(0, 223, 130, 0.28)'
,
}
}
>
{
t
}
</
span
>
)
)
}
</
div
>
)
}
</
div
>
<
div
className
=
"blog-article-shell-body"
style
=
{
{
padding
:
'0.25rem 0.15rem 0.5rem'
,
}
}
>
{
children
}
</
div
>
</
div
>
)
;
}
return
(
<
div
className
=
"blog-article-shell blog-article-shell--default"
style
=
{
{
padding
:
'1.25rem 1.25rem 1.5rem'
,
borderRadius
:
'var(--pts-card-radius)'
,
background
:
'linear-gradient(180deg, var(--pts-tech-header) 0%, var(--pts-card-bg) 35%)'
,
border
:
'1px solid var(--pts-border)'
,
boxShadow
:
'var(--pts-shadow-lp)'
,
}
}
>
{
children
}
</
div
>
)
;
}
Back
|
FazBrowse Home
|
New Git URL