-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDndAuthorCard.jsx
More file actions
78 lines (71 loc) · 2.93 KB
/
DndAuthorCard.jsx
File metadata and controls
78 lines (71 loc) · 2.93 KB
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
import React from 'react';
import { Link } from 'react-router-dom';
import { GlobeIcon, BookOpenIcon } from '@phosphor-icons/react';
const DndAuthorCard = ({
authorName,
authorWebsite,
authorImage,
authorAlias,
booksWritten,
}) => {
return (
<div className="dnd-parchment-container p-8 md:p-12 shadow-xl group transition-all duration-500 hover:-translate-y-2 border-2 border-black/10">
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-10 !h-10" />
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-10 !h-10" />
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-10 !h-10" />
<div className="dnd-ornate-corner dnd-ornate-corner-br !w-10 !h-10" />
<div className="relative z-10 flex flex-col items-center text-center">
<div className="relative mb-6">
<div className="absolute inset-0 bg-dnd-gold rounded-full blur-md opacity-20 group-hover:opacity-40 transition-opacity" />
<img
src={authorImage}
alt={authorName}
className="w-32 h-32 rounded-full object-cover border-4 border-dnd-gold shadow-lg grayscale hover:grayscale-0 transition-all duration-700"
/>
</div>
<h3 className="text-3xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-1">
{authorName}
</h3>
{authorAlias && (
<span className="text-[10px] font-mono font-bold uppercase tracking-[0.4em] text-dnd-crimson/40 mb-4">
Known as // {authorAlias}
</span>
)}
<div className="dnd-mystic-divider !my-4 opacity-20" />
{authorWebsite && (
<a
href={authorWebsite}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-xs font-mono font-bold uppercase tracking-widest text-dnd-crimson/60 hover:text-dnd-crimson transition-colors mb-8"
>
<GlobeIcon size={14} />
Digital Signal
</a>
)}
{booksWritten && booksWritten.length > 0 && (
<div className="w-full pt-6 border-t border-dnd-crimson/10">
<div className="flex items-center justify-center gap-2 mb-4 opacity-40">
<BookOpenIcon size={16} />
<span className="text-[9px] font-mono font-bold uppercase tracking-[0.3em]">
Compiled Tomes
</span>
</div>
<div className="space-y-2">
{booksWritten.map((book, index) => (
<Link
key={index}
to={`/stories/books/${book.bookId}`}
className="block text-sm font-arvo font-bold text-dnd-crimson/80 hover:text-dnd-crimson transition-colors"
>
{book.bookTitle}
</Link>
))}
</div>
</div>
)}
</div>
</div>
);
};
export default DndAuthorCard;