mirror of
https://dev.azure.com/tstanciu94/ReverseProxy/_git/ReverseProxy_Frontend
synced 2025-10-03 16:49:04 +03:00
c05de1a7dc
- feat: Add session management components and improve system overview - feat: Update dependencies and replace react-flags with react-country-flag - Update dependencies in package.json: reintroduce react-dom and upgrade redux to version 5.0.1 - refactor: update chatbot implementation and dependencies - refactor: migrate to Redux Toolkit and update dependencies - feat: enhance ReactCountryFlag component with SVG support - refactor: remove Bootstrap dependency and update Node engine requirement; add LabelValue component for better UI consistency - refactor: enhance LabelValue component usage in ServerSummary for improved readability and tooltip support - refactor: replace inline text with LabelValue component in ActiveSessionSummary and SessionSummary for improved consistency and readability - refactor: update components to use LabelValue for improved consistency and readability - refactor: optimize LabelValue component for improved readability and structure - refactor: improve code readability in SessionForwardsComponent by standardizing arrow function syntax and adjusting styling properties
84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import {
|
|
Card,
|
|
CardHeader,
|
|
CardContent,
|
|
Avatar,
|
|
Typography
|
|
} from "@mui/material";
|
|
import { useTranslation } from "react-i18next";
|
|
import SkillBar from "react-skillbars";
|
|
|
|
const serverTechnologies = [
|
|
{ type: "C#", level: 85 },
|
|
{ type: "ProxyKit", level: 25 },
|
|
{ type: "Let's_Encrypt", level: 10 },
|
|
{ type: "SQL Server", level: 15 },
|
|
{ type: "Docker", level: 5 }
|
|
];
|
|
|
|
const apiTechnologies = [
|
|
{ type: "C#", level: 90 },
|
|
{ type: "SQL Server", level: 10 },
|
|
{ type: "Docker", level: 5 }
|
|
];
|
|
|
|
const frontendTechnologies = [
|
|
{ type: "React", level: 75 },
|
|
{ type: "Redux", level: 15 },
|
|
{ type: "Javascript", level: 10 },
|
|
{ type: "Node.js", level: 5 },
|
|
{ type: "Docker", level: 5 }
|
|
];
|
|
|
|
const colors = {
|
|
bar: "#5e8fff",
|
|
title: {
|
|
text: "#fd7e14",
|
|
background: "#3f51b5"
|
|
}
|
|
};
|
|
|
|
const TechnologiesComponent: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
avatar={
|
|
<Avatar
|
|
aria-label="recipe"
|
|
sx={{
|
|
backgroundColor: 'primary.main'
|
|
}}
|
|
>
|
|
T
|
|
</Avatar>
|
|
}
|
|
title={t("About.Technologies.Title")}
|
|
/>
|
|
<CardContent>
|
|
<Typography variant="body2" color="textSecondary" component="p">
|
|
{t("About.Technologies.Content")}
|
|
</Typography>
|
|
<br />
|
|
<Typography variant="h6" color="textSecondary">
|
|
{t("System.Components.Server")}
|
|
</Typography>
|
|
<SkillBar skills={serverTechnologies} colors={colors} height={20} />
|
|
<br />
|
|
<Typography variant="h6" color="textSecondary">
|
|
{t("System.Components.Api")}
|
|
</Typography>
|
|
<SkillBar skills={apiTechnologies} colors={colors} height={20} />
|
|
<br />
|
|
<Typography variant="h6" color="textSecondary">
|
|
{t("System.Components.Frontend")}
|
|
</Typography>
|
|
<SkillBar skills={frontendTechnologies} colors={colors} height={20} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default TechnologiesComponent;
|