Skip to content

Commit c8fe145

Browse files
Z-xusZ-xus
authored
Merge pull request #3 from Pratik-Bhuvad/master
feat: compact UI for 'regex to FA' page
2 parents e2efbea + 17b30e0 commit c8fe145

13 files changed

Lines changed: 6968 additions & 205 deletions

‎package-lock.json‎

Lines changed: 6750 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,8 @@ export default function App() {
133133

134134
function Home() {
135135
return (
136-
<div className="min-h-screen bg-gray-900 text-white w-screen">
137-
<Navbar />
138-
<main className="w-screen">
136+
<div className="min-h-screen bg-gray-900 text-white w-full">
137+
<main className="w-full box-border overflow-x-hidden">
139138
<Hero />
140139
<Features />
141140
<CTA />

‎src/Layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Layout: React.FC = () => {
66
return (
77
<>
88
<Navbar />
9-
<div className="content" style={{ marginTop: '3rem' }}>
9+
<div className="content w-[calc(100vw-15px)]" style={{ marginTop: '3rem' }}>
1010
<Outlet />
1111
</div>
1212
</>
@@ -16,4 +16,4 @@ const Layout: React.FC = () => {
1616
export default Layout;
1717

1818

19-
// Adjust the import path to your Navbar
19+
// Adjust the import path to your Navbar

‎src/graphs/nodes/NodeCreatorButton.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,17 @@ const NodeCreatorButton = ({ onAddNode }) => {
1212
setIsAcceptState(false);
1313
};
1414
return (
15-
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '10px', borderRadius: '5px' }}>
15+
<div className='grid grid-cols-2' style={{ gap: '8px', padding: '5px 10px', borderRadius: '5px' }}>
1616
<input
17-
type="text"
18-
value={nodeName}
19-
onChange={(e) => setNodeName(e.target.value)}
20-
placeholder="Add state"
21-
className="w-full p-2 border border-gray-600 rounded bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
17+
type="text"
18+
value={nodeName}
19+
onChange={(e) => setNodeName(e.target.value)}
20+
placeholder="Add state"
21+
className="w-full p-2 border border-gray-600 rounded bg-gray-800 text-white col-span-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
2222
/>
23-
<label style={{ color: 'white' }}>
23+
<label style={{ color: 'white' }} className='flex items-center gap-1 justify-center'>
2424
<input
25+
className='mt-0.5'
2526
type="checkbox"
2627
checked={isAcceptState}
2728
onChange={(e) => setIsAcceptState(e.target.checked)}
@@ -30,7 +31,7 @@ const NodeCreatorButton = ({ onAddNode }) => {
3031
</label>
3132
<button
3233
onClick={handleAddNode}
33-
className="mt-4 w-full p-2 bg-gray-600 rounded border-solid-white cursor-pointer text-white hover:bg-gray-500 transition-colors"
34+
className="mt-2 w-full p-2 bg-gray-600 rounded border-solid-white cursor-pointer text-white hover:bg-gray-500 transition-colors"
3435
>
3536
Add State
3637
</button>

‎src/index.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
65
:root {
76
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
87
line-height: 1.5;
@@ -23,6 +22,7 @@ a {
2322
color: #646cff;
2423
text-decoration: inherit;
2524
}
25+
2626
a:hover {
2727
color: #535bf2;
2828
}
@@ -35,6 +35,11 @@ body {
3535
min-height: 100vh;
3636
}
3737

38+
html, body {
39+
overscroll-behavior-y: none;
40+
}
41+
42+
3843
h1 {
3944
font-size: 3.2em;
4045
line-height: 1.1;
@@ -51,9 +56,11 @@ button {
5156
cursor: pointer;
5257
transition: border-color 0.25s;
5358
}
59+
5460
button:hover {
5561
border-color: #646cff;
5662
}
63+
5764
button:focus,
5865
button:focus-visible {
5966
outline: 4px auto -webkit-focus-ring-color;
@@ -64,9 +71,11 @@ button:focus-visible {
6471
color: #213547;
6572
background-color: #ffffff;
6673
}
74+
6775
a:hover {
6876
color: #747bff;
6977
}
78+
7079
button {
7180
background-color: #f9f9f9;
7281
}
@@ -100,6 +109,7 @@ button:focus-visible {
100109
--chart-5: 27 87% 67%;
101110
--radius: 0.5rem;
102111
}
112+
103113
.dark {
104114
--background: 0 0% 3.9%;
105115
--foreground: 0 0% 98%;
@@ -132,7 +142,8 @@ button:focus-visible {
132142
* {
133143
@apply border-border;
134144
}
145+
135146
body {
136147
@apply bg-background text-foreground;
137148
}
138-
}
149+
}

‎src/pages/DFAtoUI.tsx‎

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -125,49 +125,53 @@ export default function DFAtoUI() {
125125
const [isOpen, setIsOpen] = useState(false);
126126

127127
return (
128-
<div className="h-screen w-screen flex bg-black text-white">
128+
<div className="h-[calc(100vh-3rem)] w-screen flex bg-black text-white">
129129
{/* Floating Sidebar */}
130130
<div
131-
className={`fixed left-0 top-0 h-screen bg-gray-900 transition-all duration-300 ease-in-out z-10 ${isOpen ? 'w-64 md:w-1/4' : 'w-2 hover:w-64 md:hover:w-1/4'
131+
className={`fixed left-0 top-[4rem] h-screen bg-gray-900 transition-all duration-300 ease-in-out z-10 ${isOpen ? 'w-64 md:w-1/4' : 'w-2 hover:w-64 md:hover:w-1/4'
132132
}`}
133133
onMouseEnter={() => setIsOpen(true)}
134134
onMouseLeave={() => setIsOpen(false)}
135135
>
136136
<div className={`p-5 ${isOpen ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300 overflow-y-auto h-full`}>
137-
<h2 className="text-lg font-semibold mb-4">Add a State:</h2>
137+
<h2 className="text-lg font-semibold mb-2">Add a State:</h2>
138138
<NodeCreatorButton onAddNode={addNode} />
139139

140-
<h2 className="text-lg font-semibold mt-6">Add an Edge:</h2>
141-
142-
<h2 className="text-lg font-semibold mt-4">Select Start State:</h2>
143-
<select
144-
value={startState}
145-
onChange={(e) => setStartState(e.target.value)}
146-
className="w-full p-2 border border-gray-600 rounded bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
147-
>
148-
<option value="" disabled>Start state</option>
149-
{nodes.map(node => (
150-
<option key={node.id} value={node.id}>
151-
{node.data.label} {node.data.isAcceptState ? "(Accept)" : ""}
152-
</option>
153-
))}
154-
</select>
155-
156-
<h2 className="text-lg font-semibold mt-4">Select End State:</h2>
157-
<select
158-
value={endState}
159-
onChange={(e) => setEndState(e.target.value)}
160-
className="w-full p-2 border border-gray-600 rounded bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
161-
>
162-
<option value="" disabled>End state</option>
163-
{nodes.map(node => (
164-
<option key={node.id} value={node.id}>
165-
{node.data.label} {node.data.isAcceptState ? "(Accept)" : ""}
166-
</option>
167-
))}
168-
</select>
169-
170-
<h2 className="text-lg font-semibold mt-4">Enter Transition Symbol:</h2>
140+
<h2 className="text-lg font-semibold mt-3">Add an Edge:</h2>
141+
142+
<div className="flex items-center justify-between gap-4 mt-4">
143+
<h2 className="text-lg font-semibold text-justify">Select Start State:</h2>
144+
<select
145+
value={startState}
146+
onChange={(e) => setStartState(e.target.value)}
147+
className="w-fit p-2 border border-gray-600 rounded bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
148+
>
149+
<option value="" disabled>Start state</option>
150+
{nodes.map(node => (
151+
<option key={node.id} value={node.id}>
152+
{node.data.label} {node.data.isAcceptState ? "(Accept)" : ""}
153+
</option>
154+
))}
155+
</select>
156+
</div>
157+
158+
<div className="flex items-center justify-between gap-4 mt-4">
159+
<h2 className="text-lg font-semibold">Select End State:</h2>
160+
<select
161+
value={endState}
162+
onChange={(e) => setEndState(e.target.value)}
163+
className="w-fit p-2 border border-gray-600 rounded bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
164+
>
165+
<option value="" disabled>End state</option>
166+
{nodes.map(node => (
167+
<option key={node.id} value={node.id}>
168+
{node.data.label} {node.data.isAcceptState ? "(Accept)" : ""}
169+
</option>
170+
))}
171+
</select>
172+
</div>
173+
174+
<h2 className="text-lg font-semibold mt-4 mb-1.5">Enter Transition Symbol:</h2>
171175
<input
172176
type="text"
173177
value={transitionSymbol}
@@ -176,21 +180,23 @@ export default function DFAtoUI() {
176180
className="w-full p-2 border border-gray-600 rounded bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
177181
/>
178182

179-
<button
180-
onClick={() => handleAddEdge()}
181-
className="mt-4 w-full p-2 bg-gray-600 rounded border-solid-white cursor-pointer text-white hover:bg-gray-500 transition-colors"
182-
>
183-
Add Edge
184-
</button>
185-
186-
<button
187-
onClick={handleDeleteElements}
188-
className="mt-4 w-full p-2 bg-gray-600 rounded border-solid-white cursor-pointer text-white hover:bg-gray-500 transition-colors"
189-
>
190-
Delete Elements
191-
</button>
192-
193-
<h2 className="text-lg font-semibold mt-6">Validate String:</h2>
183+
<div className="flex items-center justify-center gap-4 mt-4">
184+
<button
185+
onClick={() => handleAddEdge()}
186+
className="w-full p-2 bg-gray-600 rounded border-solid-white cursor-pointer text-white hover:bg-gray-500 transition-colors"
187+
>
188+
Add Edge
189+
</button>
190+
191+
<button
192+
onClick={handleDeleteElements}
193+
className="w-full p-2 bg-gray-600 rounded border-solid-white cursor-pointer text-white hover:bg-gray-500 transition-colors"
194+
>
195+
Delete Elements
196+
</button>
197+
</div>
198+
199+
<h2 className="text-lg font-semibold mt-4 mb-1.5">Validate String:</h2>
194200
<input
195201
type="text"
196202
value={input}

0 commit comments

Comments
 (0)