-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathIpPage.jsx
More file actions
135 lines (128 loc) · 4.12 KB
/
IpPage.jsx
File metadata and controls
135 lines (128 loc) · 4.12 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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import {
ArrowLeftIcon,
Clipboard as ClipboardIcon,
} from '@phosphor-icons/react';
import colors from '../../config/colors';
import { useToast } from '../../hooks/useToast';
import Seo from '../../components/Seo';
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
function IpPage() {
const [ip, setIp] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const { addToast } = useToast();
useEffect(() => {
fetch('/api/show-my-ip?format=json')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not OK!');
}
return response.json();
})
.then((data) => {
setIp(data.ip);
setLoading(false);
})
.catch((error) => {
setError(error.message);
setLoading(false);
});
}, []);
const handleCopy = () => {
if (ip) {
navigator.clipboard.writeText(ip).then(
() => {
addToast({
title: 'Success',
message: 'IP address copied to clipboard!',
duration: 3000,
});
},
() => {
addToast({
title: 'Error',
message: 'Failed to copy IP address!',
duration: 3000,
});
},
);
}
};
const cardStyle = {
backgroundColor: colors['app-alpha-10'],
borderColor: colors['app-alpha-50'],
color: colors.app,
};
const detailTextColor = colors['app-light'];
return (
<div className="py-16 sm:py-24">
<Seo
title="Show my IP | Fezcodex"
description="Quickly find and display your public IP address."
keywords={[
'Fezcodex',
'show my IP',
'what is my IP',
'IP address',
'public IP',
]}
/>
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
<Link
to="/apps"
className="group text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
>
<ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1" />{' '}
Back to Apps
</Link>
<BreadcrumbTitle title="Show my IP" slug="ip" />
<hr className="border-gray-700" />
<div className="flex justify-center items-center mt-8">
<div
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-md"
style={cardStyle}
>
<div
className="absolute top-0 left-0 w-full h-full opacity-10"
style={{
backgroundImage:
'radial-gradient(circle, white 1px, transparent 1px)',
backgroundSize: '10px 10px',
}}
></div>
<div className="relative z-10 text-center">
<h2
className="text-2xl font-normal"
style={{ color: cardStyle.color }}
>
Your Public IP Address
</h2>
<div
className="mt-4 text-3xl font-mono select-text"
style={{ color: detailTextColor }}
>
{loading && <p>Loading...</p>}
{error && <p>Error: {error}</p>}
{ip && <p>{ip}</p>}
</div>
{ip && (
<div className="mt-6 flex justify-center">
<button
onClick={handleCopy}
className="bg-tb text-app border-app-alpha-50 hover:bg-app/15 flex items-center gap-2 text-lg font-semibold px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out"
>
<ClipboardIcon size={24} />
Copy
</button>
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
}
export default IpPage;