FlexboxGenerator page added

ui/src/data/featureData.ts

@@ -83,6 +83,15 @@ export const FEATURE_DATA: Feature[] = [
 		link: routesById.boxshadow.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
+	{
+		key: routesById.flexboxgenerator.id,
+		name: routesById.flexboxgenerator.title,
+		shortDescription: routesById.flexboxgenerator.description,
+		fullDescription:
+			"Arrange your items inside your container element as like as you want.",
+		link: routesById.flexboxgenerator.path,
+		library: [{ name: "Vanilla JS", url: "" }],
+	},
 	{
 		key: routesById.base64.id,
 		name: routesById.base64.title,

ui/src/data/helpData.ts

@@ -84,6 +84,7 @@ const HELP: Help = {
 			},
 		],
 	},
+
 	// [routesById.units.id]: {
 	// 	description: featuresById.units.fullDescription,
 	// 	helpTexts: [
@@ -479,6 +480,16 @@ const HELP: Help = {
 			},
 		],
 	},
+	[routesById.flexboxgenerator.id]: {
+		description: featuresById.flexboxgenerator.fullDescription,
+		helpTexts: [
+			{
+				id: "48",
+				title: "",
+				bulletPoints: [],
+			},
+		],
+	},
 };
 
 export type { HelpEntry };

ui/src/data/menuData.ts

@@ -55,6 +55,12 @@ export const MENU_ITEMS = [
 				icon: "Box",
 				show: true,
 			},
+			{
+				name: routesById.flexboxgenerator.title,
+				url: routesById.flexboxgenerator.path,
+				icon: "AlignCenter",
+				show: IN_DEVELOPMENT,
+			},
 			{
 				name: routesById.units.title,
 				url: routesById.units.path,

ui/src/data/routeData.tsx

@@ -52,6 +52,7 @@ import {
 	UiUx,
 	Units,
 	YouTube,
+	FlexboxGenerator,
 } from "pages";
 import { FC } from "react";
 
@@ -109,7 +110,8 @@ export type RouteId =
 	| "tvseries"
 	| "uiux"
 	| "units"
-	| "youtube";
+	| "youtube"
+	| "flexboxgenerator";
 
 interface Route {
 	path: string;
@@ -155,6 +157,13 @@ export const routes: Route[] = [
 		description: "Add drama to your box! Shadows included.",
 		component: BoxShadow,
 	},
+	{
+		id: "flexboxgenerator",
+		path: "/css/fg",
+		title: "Flexbox Generator",
+		description: "Arrange your item inside your container.",
+		component: FlexboxGenerator,
+	},
 	{
 		id: "units",
 		path: "/css/units",

ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.module.scss

@@ -0,0 +1,14 @@
+.fg {
+	display: flex;
+	flex-direction: column;
+	gap: var(--bt-size-20);
+	&__input {
+		height: var(--bt-size-percent-100);
+	}
+	&__output {
+		height: var(--bt-size-percent-100);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}

ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx

@@ -0,0 +1,173 @@
+import { FC, useState } from "react";
+import { Card, Form, Space } from "antd";
+import { PageGrid, InputGrid } from "components/Layouts";
+import {
+	CodeHighlightWithCopy,
+	ResponsiveSelectWithLabel,
+	ResponsiveButton
+} from "components/General";
+import {
+	JUSTIFY_CONTENT,
+	FLEX_DIRECTION,
+	ALIGN_ITEM,
+	ALIGN_CONTENT,
+	FLEX_WRAP,
+} from "./constants";
+import style from "./FlexboxGenerator.module.scss";
+
+const FlexboxGenerator: FC = () => {
+	const [bgColor, setBgColor] = useState("#ffffff0");
+	const [boxColor, setBoxColor] = useState("#4f5456");
+	const [justifyContent, setJustifyContent] = useState(JUSTIFY_CONTENT[0].value);
+	const [flexDirection, setFlexDirection] = useState(FLEX_DIRECTION[0].value);
+	const [alignItem, setAlignItem] = useState(ALIGN_ITEM[0].value);
+	const [alignContent, setAlignContent] = useState(ALIGN_CONTENT[0].value);
+	const [flexWrap, setFlexWrap] = useState(FLEX_WRAP[0].value);
+	const [itemCount, setItemCount] = useState(3);
+
+	const indices = Array.from({ length: itemCount }, (_, index) => index);
+
+	const containerStyle = {
+		width: "70dvh",
+		height: "50dvh",
+		backgroundColor: boxColor,
+		borderRadius:".8rem",
+		display:"flex",
+		justifyContent: `${justifyContent}`,
+		flexDirection: `${flexDirection}`,
+		alignItem: `${alignItem}`,
+		alignContent: `${alignContent}`,
+		flexWrap: `${flexWrap}`,
+	};
+
+	const itemStyle = {
+		width: "5rem",
+		height: "5rem",
+		background: "whitesmoke",
+		color:"black",
+		margin: "10px",
+		padding:"10px",
+		borderRadius:".5rem",
+	}
+
+	const generateCSSCodeString = () => {
+		const displayFlexCode = `display: flex`;
+		const justifyContentCode = `justify-content: ${justifyContent};`;
+		const flexDirectionCode = `flex-direction: ${flexDirection};`;
+		const alignItemCode = `align-item: ${alignItem};`;
+		const alignContentnCode = `align-content: ${alignContent};`;
+		const flexWrapCode = `flex-wrap: ${flexWrap};`;
+
+		return `${displayFlexCode}\n${justifyContentCode}\n${flexDirectionCode}\n${alignItemCode}\n${alignContentnCode}\n${flexWrapCode}`;
+	};
+
+	const addItem = () => {
+		setItemCount(itemCount+ 1);
+	}
+	const removeItem = () => {
+		setItemCount(itemCount - 1);
+	}
+
+	return (
+		<div className={style.fg}>
+			<PageGrid>
+				<Card className={style.fg__input}>
+					Container
+					<Card>
+						<Space>
+							<ResponsiveButton
+								onClick={() => addItem()}
+							>
+								Add Item
+							</ResponsiveButton>
+
+							<ResponsiveButton
+								onClick={() => removeItem()}
+							>
+								Remove Item
+							</ResponsiveButton>
+
+						</Space>
+						<Form layout="vertical">
+							<br />
+							<InputGrid>
+								<ResponsiveSelectWithLabel
+									label="Justify Content"
+									value={justifyContent}
+									defaultActiveFirstOption
+									onSelect={(_, option) =>
+										setJustifyContent(option.value)
+									}
+									options={JUSTIFY_CONTENT}
+								/>
+								<ResponsiveSelectWithLabel
+									label="Flex Direction"
+									value={flexDirection}
+									defaultActiveFirstOption
+									onSelect={(_, option) =>
+										setFlexDirection(option.value)
+									}
+									options={FLEX_DIRECTION}
+								/>
+							</InputGrid>
+							<InputGrid>
+								<ResponsiveSelectWithLabel
+									label="Align Item"
+									value={alignItem}
+									defaultActiveFirstOption
+									onSelect={(_, option) =>
+										setAlignItem(option.value)
+									}
+									options={ALIGN_ITEM}
+								/>
+								<ResponsiveSelectWithLabel
+									label="Align Content"
+									value={alignContent}
+									defaultActiveFirstOption
+									onSelect={(_, option) =>
+										setAlignContent(option.value)
+									}
+									options={ALIGN_CONTENT}
+								/>
+							</InputGrid>
+							<InputGrid>
+								<ResponsiveSelectWithLabel
+									label="Flex Wrap"
+									value={flexWrap}
+									defaultActiveFirstOption
+									onSelect={(_, option) =>
+										setFlexWrap(option.value)
+									}
+									options={FLEX_WRAP}
+								/>
+							</InputGrid>
+						</Form>
+					</Card>
+				</Card>
+
+				<Card
+					className={style.fg__output}
+					style={{ background: bgColor }}
+				>
+					<Space direction="vertical">
+						<div style={containerStyle}>
+							{indices.map((index) => (
+								<div key={index} style={itemStyle}>
+									Item {index + 1}
+								</div>
+							))}
+						</div>
+					</Space>
+				</Card>
+			</PageGrid>
+			<Card>
+				<CodeHighlightWithCopy
+					codeString={generateCSSCodeString()}
+					language="css"
+				/>
+			</Card>
+		</div>
+	);
+};
+
+export default FlexboxGenerator;

ui/src/pages/CSS/FlexboxGenerator/constants.ts

@@ -0,0 +1,45 @@
+const JUSTIFY_CONTENT = [
+	{ label: "flext-start", value: "flext-start"},
+	{ label: "flex-end", value: "flex-end" },
+	{ label: "center", value: "center" },
+	{ label: "space-evenly", value: "space-evenly" },
+	{ label: "space-around", value: "space-around" },
+	{ label: "space-between", value: "space-between" },
+];
+
+const FLEX_DIRECTION = [
+	{ label: "row", value: "row"},
+	{ label: "column", value: "column" },
+	{ label: "row-reverse", value: "row-reverse" },
+	{ label: "column-reverse", value: "column-reverse" },
+];
+
+const ALIGN_ITEM = [
+	{ label: "flex-start", value: "flex-start"},
+	{ label: "flex-end", value: "flex-end" },
+	{ label: "center", value: "center" },
+	{ label: "stretch", value: "stretch" },
+	{ label: "baseline", value: "baseline" },
+];
+
+const ALIGN_CONTENT = [
+	{ label: "flex-start", value: "flex-start"},
+	{ label: "flex-end", value: "flex-end" },
+	{ label: "center", value: "center" },
+	{ label: "stretch", value: "stretch" },
+	{ label: "baseline", value: "baseline" },
+];
+
+const FLEX_WRAP = [
+	{ label: "nowrap", value: "nowrap"},
+	{ label: "wrap", value: "wrap" },
+	{ label: "wrap-reverse", value: "wrap-reverse" },
+];
+
+export {
+	JUSTIFY_CONTENT,
+	FLEX_DIRECTION,
+	ALIGN_ITEM,
+	ALIGN_CONTENT,
+	FLEX_WRAP,
+};

ui/src/pages/CSS/FlexboxGenerator/index.ts

@@ -0,0 +1 @@
+export { default } from "./FlexboxGenerator";

ui/src/pages/index.ts

@@ -14,6 +14,7 @@ const ShadesAndTints = lazy(() => import("pages/Colors/ShadesAndTints"));
 
 const BorderRadius = lazy(() => import("pages/CSS/BorderRadius"));
 const BoxShadow = lazy(() => import("pages/CSS/BoxShadow"));
+const FlexboxGenerator = lazy(() => import("pages/CSS/FlexboxGenerator"));
 const Units = lazy(() => import("pages/CSS/Units"));
 
 const Base64 = lazy(() => import("pages/Converter/Base64"));
@@ -74,6 +75,7 @@ export {
 	Book,
 	BorderRadius,
 	BoxShadow,
+	FlexboxGenerator,
 	CodeFormatter,
 	ColorPicker,
 	CookiePolicy,