input added

components/input.jsx

@@ -0,0 +1,20 @@
+import React, {useState} from "react";
+
+
+const Input = (props) => {
+
+    const {handleKeyword} = props;
+
+    return (
+        <div>
+            <label className="text-gray-400 text-sm">{props.label}</label>
+            <input
+                type='text'
+                className="flex h-10 text-2xl w-full uppercase font-bold rounded-md border border-input bg-background px-3 py-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                onChange={(e)=> handleKeyword(e.target.value)}
+            />
+        </div>
+    );
+}
+
+export default Input;

components/matrix.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+const gap = -2
+const match = 1
+const mismatch = -1
+
+
+const Matrix = ({ sequence1, sequence2 }) => {
+    console.log(sequence1, sequence2)
+    const matrix = []
+    for (let i = 0; i < sequence1.length + 1; i++) {
+        matrix.push([])
+        for (let j = 0; j < sequence2.length + 1; j++) {
+            matrix[i].push(0)
+        }
+    }
+    for (let i = 0; i < sequence1.length + 1; i++) {
+        matrix[i][0] = i * gap
+    }
+    for (let j = 0; j < sequence2.length + 1; j++) {
+        matrix[0][j] = j * gap
+    }
+    for (let i = 1; i < sequence1.length + 1; i++) {
+        for (let j = 1; j < sequence2.length + 1; j++) {
+            if (sequence1[i - 1] === sequence2[j - 1]) {
+                matrix[i][j] = Math.max(
+                    matrix[i - 1][j - 1] + match,
+                    matrix[i - 1][j] + gap,
+                    matrix[i][j - 1] + gap
+                )
+            } else {
+                matrix[i][j] = Math.max(
+                    matrix[i - 1][j - 1] + mismatch,
+                    matrix[i - 1][j] + gap,
+                    matrix[i][j - 1] + gap
+                )
+            }
+        }
+    }
+    return (
+        <table className="rounded-2xl border-red-500 border">
+            <tbody className="rounded-2xl">
+            {matrix.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                    {row.map((cell, columnIndex) => (
+                        <td className="border-2 border-gray-500 w-16 h-16" key={columnIndex}>
+                            <div className="flex flex-wrap justify-center">
+                                {cell}
+                            </div>
+                        </td>
+                    ))}
+                </tr>
+            ))}
+            </tbody>
+        </table>
+    )
+};
+
+export default Matrix;