refactor(databases): show hide and show icon in enviroment tab

components/dashboard/mariadb/environment/show-mariadb-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.mariadb.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.mariadb.one.useQuery(
@@ -74,11 +77,26 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
+				{" "}
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
-					<CardDescription>
+					<div>
-						You can add environment variables to your database.
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
-					</CardDescription>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +113,7 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/mongo/environment/show-mongo-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowMongoEnvironment = ({ mongoId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.mongo.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.mongo.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
+					<div>
-					<CardDescription>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
-						You can add environment variables to your database.
+						<CardDescription>
-					</CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/mysql/environment/show-mysql-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.mysql.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.mysql.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
+					<div>
-					<CardDescription>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
-						You can add environment variables to your database.
+						<CardDescription>
-					</CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/postgres/environment/show-postgres-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.postgres.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.postgres.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
+					<div>
-					<CardDescription>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
-						You can add environment variables to your database.
+						<CardDescription>
-					</CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/redis/environment/show-redis-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowRedisEnvironment = ({ redisId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.redis.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.redis.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowRedisEnvironment = ({ redisId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
+					<div>
-					<CardDescription>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
-						You can add environment variables to your database.
+						<CardDescription>
-					</CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowRedisEnvironment = ({ redisId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}