Skip to content

Commit 62082f3

Browse files
authored
Added copy functionality in solutions page (#32)
Added copy button to solution code blocks - Implement copy to clipboard functionality in SolutionSection component - Add visual feedback when code is copied ("Copy" changes to "Copied!") - Auto-reset copy state after 2 seconds - Position button in top-right corner with hover effects - Maintain existing component functionality credits to @bhaumikmaan
1 parent 62dcb53 commit 62082f3

File tree

1 file changed

+53
-34
lines changed

1 file changed

+53
-34
lines changed

src/_pages/Solutions.tsx

Lines changed: 53 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -48,41 +48,60 @@ const SolutionSection = ({
4848
content: React.ReactNode
4949
isLoading: boolean
5050
currentLanguage: string
51-
}) => (
52-
<div className="space-y-2">
53-
<h2 className="text-[13px] font-medium text-white tracking-wide">
54-
{title}
55-
</h2>
56-
{isLoading ? (
57-
<div className="space-y-1.5">
58-
<div className="mt-4 flex">
59-
<p className="text-xs bg-gradient-to-r from-gray-300 via-gray-100 to-gray-300 bg-clip-text text-transparent animate-pulse">
60-
Loading solutions...
61-
</p>
51+
}) => {
52+
const [copied, setCopied] = useState(false)
53+
54+
const copyToClipboard = () => {
55+
if (typeof content === "string") {
56+
navigator.clipboard.writeText(content).then(() => {
57+
setCopied(true)
58+
setTimeout(() => setCopied(false), 2000)
59+
})
60+
}
61+
}
62+
63+
return (
64+
<div className="space-y-2 relative">
65+
<h2 className="text-[13px] font-medium text-white tracking-wide">
66+
{title}
67+
</h2>
68+
{isLoading ? (
69+
<div className="space-y-1.5">
70+
<div className="mt-4 flex">
71+
<p className="text-xs bg-gradient-to-r from-gray-300 via-gray-100 to-gray-300 bg-clip-text text-transparent animate-pulse">
72+
Loading solutions...
73+
</p>
74+
</div>
6275
</div>
63-
</div>
64-
) : (
65-
<div className="w-full">
66-
<SyntaxHighlighter
67-
showLineNumbers
68-
language={currentLanguage == "golang" ? "go" : currentLanguage}
69-
style={dracula}
70-
customStyle={{
71-
maxWidth: "100%",
72-
margin: 0,
73-
padding: "1rem",
74-
whiteSpace: "pre-wrap",
75-
wordBreak: "break-all",
76-
backgroundColor: "rgba(22, 27, 34, 0.5)"
77-
}}
78-
wrapLongLines={true}
79-
>
80-
{content as string}
81-
</SyntaxHighlighter>
82-
</div>
83-
)}
84-
</div>
85-
)
76+
) : (
77+
<div className="w-full relative">
78+
<button
79+
onClick={copyToClipboard}
80+
className="absolute top-2 right-2 text-xs text-white bg-white/10 hover:bg-white/20 rounded px-2 py-1 transition"
81+
>
82+
{copied ? "Copied!" : "Copy"}
83+
</button>
84+
<SyntaxHighlighter
85+
showLineNumbers
86+
language={currentLanguage == "golang" ? "go" : currentLanguage}
87+
style={dracula}
88+
customStyle={{
89+
maxWidth: "100%",
90+
margin: 0,
91+
padding: "1rem",
92+
whiteSpace: "pre-wrap",
93+
wordBreak: "break-all",
94+
backgroundColor: "rgba(22, 27, 34, 0.5)"
95+
}}
96+
wrapLongLines={true}
97+
>
98+
{content as string}
99+
</SyntaxHighlighter>
100+
</div>
101+
)}
102+
</div>
103+
)
104+
}
86105

87106
export const ComplexitySection = ({
88107
timeComplexity,

0 commit comments

Comments
 (0)