File size: 1,982 Bytes
e3278e4 |
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 |
"use client";
import React, { useState, ChangeEvent } from "react";
import { Button, Col, Grid, TextInput } from "@tremor/react";
import { Card, Text } from "@tremor/react";
const EnterProxyUrl: React.FC = () => {
const [proxyUrl, setProxyUrl] = useState<string>("");
const [isUrlSaved, setIsUrlSaved] = useState<boolean>(false);
const handleUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
setProxyUrl(event.target.value);
// Reset the saved status when the URL changes
setIsUrlSaved(false);
};
const handleSaveClick = () => {
// You can perform any additional validation or actions here
// For now, let's just display the message
setIsUrlSaved(true);
};
// Construct the URL for clicking
const clickableUrl = `${window.location.href}?proxyBaseUrl=${proxyUrl}`;
return (
<div>
<Card decoration="top" decorationColor="blue" style={{ width: '1000px' }}>
<Text>Admin Configuration</Text>
<label htmlFor="proxyUrl">Enter Proxy URL:</label>
<TextInput
type="text"
id="proxyUrl"
value={proxyUrl}
onChange={handleUrlChange}
placeholder="https://your-proxy-endpoint.com"
/>
<Button onClick={handleSaveClick} className="gap-2">Save</Button>
{/* Display message if the URL is saved */}
{isUrlSaved && (
<div>
<Grid numItems={1} className="gap-2">
<Col>
<p>
Proxy Admin UI (Save this URL): {clickableUrl}
</p>
</Col>
<Col>
<p>
Get Started with Proxy Admin UI 👉
<a href={clickableUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'blue', textDecoration: 'underline' }}>
{clickableUrl}
</a>
</p>
</Col>
</Grid>
</div>
)}
</Card>
</div>
);
};
export default EnterProxyUrl;
|