This repository has no description
add circular logo
author
damedotblog
date
(Feb 14, 2025, 2:59 PM -0500)
commit
1a0997a5
1a0997a5696b023fa6d20a0bb3f973eb596193d5
parent
49f8452b
49f8452b596f5a7e0a2ce06e291b6d45c661c7a5
+91
public/credbluebadge.png
public/credbluebadge.png
This is a binary file and will not be displayed.
+84
src/components/UserProfile/CircularLogo.js
+84
src/components/UserProfile/CircularLogo.js
···
1
+
import React, { useEffect, useRef } from 'react';
2
+
3
+
const CircularLogo = ({
4
+
did = "did:plc:gq4fo3u6tqzzdkjlwzpb23tj",
5
+
logoSrc = "/api/placeholder/100/100",
6
+
size = 200,
7
+
textColor = "#333333"
8
+
}) => {
9
+
// Format the DID with bullet points for better spacing
10
+
const text = `${did} `;
11
+
const textGroupRef = useRef(null);
12
+
const logoSize = size * 0.4;
13
+
const radius = (size / 2) - 20;
14
+
15
+
// Repeat text to ensure full coverage
16
+
const repeatedText = text.repeat(2); // We need fewer repeats with this approach
17
+
18
+
useEffect(() => {
19
+
if (textGroupRef.current) {
20
+
let rotation = 0;
21
+
let animationFrameId;
22
+
23
+
const animate = () => {
24
+
rotation = (rotation - 0.2) % 360; // Negative for clockwise rotation
25
+
if (textGroupRef.current) {
26
+
textGroupRef.current.style.transform = `rotate(${rotation}deg)`;
27
+
}
28
+
animationFrameId = requestAnimationFrame(animate);
29
+
};
30
+
31
+
animate();
32
+
33
+
return () => {
34
+
if (animationFrameId) {
35
+
cancelAnimationFrame(animationFrameId);
36
+
}
37
+
};
38
+
}
39
+
}, []);
40
+
41
+
return (
42
+
<div className="relative w-full flex justify-center items-center">
43
+
<svg
44
+
width={size}
45
+
height={size}
46
+
viewBox={`0 0 ${size} ${size}`}
47
+
className="relative"
48
+
>
49
+
{/* Group for rotating text */}
50
+
<g ref={textGroupRef} style={{ transformOrigin: 'center' }}>
51
+
<defs>
52
+
<path
53
+
id="circlePath"
54
+
d={`M ${size/2}, ${size/2} m -${radius}, 0 a ${radius},${radius} 0 1,1 ${radius*2},0 a ${radius},${radius} 0 1,1 -${radius*2},0`}
55
+
fill="none"
56
+
/>
57
+
</defs>
58
+
59
+
<text fill={textColor} fontSize="16">
60
+
<textPath
61
+
href="#circlePath"
62
+
spacing="auto"
63
+
startOffset="0"
64
+
>
65
+
{repeatedText}
66
+
</textPath>
67
+
</text>
68
+
</g>
69
+
70
+
{/* Center circle for logo - outside the rotating group */}
71
+
<image
72
+
x={(size - logoSize) / 2}
73
+
y={(size - logoSize) / 2}
74
+
width={logoSize}
75
+
height={logoSize}
76
+
href={logoSrc}
77
+
className="rounded-full"
78
+
/>
79
+
</svg>
80
+
</div>
81
+
);
82
+
};
83
+
84
+
export default CircularLogo;
+7
src/components/UserProfile/UserProfile.js
+7
src/components/UserProfile/UserProfile.js
···
6
6
import Card from "../Card/Card";
7
7
import MatterLoadingAnimation from "../MatterLoadingAnimation";
8
8
import ScoreGauge from './ScoreGauge';
9
+
import CircularLogo from './CircularLogo';
9
10
10
11
import ProfileCard from "./components/ProfileCard";
11
12
import NarrativeCard from "./components/NarrativeCard";
···
100
101
<div className={`user-profile ${showContent ? "fade-in" : "hidden"}`}>
101
102
<div className="user-profile-header">
102
103
<div className="user-profile-header-main">
104
+
<CircularLogo
105
+
did={selectedAccountData.did}
106
+
logoSrc={selectedAccountData.avatar || "/public/credbluebadge.png"}
107
+
size={150}
108
+
textColor="#1D4ED8"
109
+
/>
103
110
<div className="user-profile-name">
104
111
<h1>{displayName}</h1>
105
112
<h2>@{resolvedHandle}</h2>