From dc8fb2b1cf71ef378d23a8ced411c29aeec2b17d Mon Sep 17 00:00:00 2001
From: Jonel Tapia <88817315+KingNelx@users.noreply.github.com>
Date: Sun, 2 Feb 2025 22:35:44 +0800
Subject: [PATCH] Update InputExampleIconChild.js

---
 .../Input/Variations/InputExampleIconChild.js | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/docs/src/examples/elements/Input/Variations/InputExampleIconChild.js b/docs/src/examples/elements/Input/Variations/InputExampleIconChild.js
index 0a4f5d8a07..901ba7a3b2 100644
--- a/docs/src/examples/elements/Input/Variations/InputExampleIconChild.js
+++ b/docs/src/examples/elements/Input/Variations/InputExampleIconChild.js
@@ -1,19 +1,20 @@
-import React from 'react'
-import { Icon, Input } from 'semantic-ui-react'
+import React from 'react';
+import { Icon, Input } from 'semantic-ui-react';
 
+const CustomInput = ({ icon, iconPosition = 'right', placeholder }) => (
+  <Input icon={!!icon} iconPosition={iconPosition} placeholder={placeholder} aria-label={placeholder}>
+    {iconPosition === 'left' && <Icon name={icon} />}
+    <input />
+    {iconPosition !== 'left' && <Icon name={icon} />}
+  </Input>
+);
+//  Better Spacing Handling – Removed unnecessary <br />, spacing can be handled via CSS.
+// More Readable & Scalable – Cleaner structure with props controlling the component
 const InputExampleIconChild = () => (
-  <div>
-    <Input icon placeholder='Search...'>
-      <input />
-      <Icon name='search' />
-    </Input>
-    <br />
-    <br />
-    <Input iconPosition='left' placeholder='Email'>
-      <Icon name='at' />
-      <input />
-    </Input>
-  </div>
-)
+  <>
+    <CustomInput icon="search" placeholder="Search..." />
+    <CustomInput icon="at" iconPosition="left" placeholder="Email" />
+  </>
+);
 
-export default InputExampleIconChild
+export default InputExampleIconChild;