feat:parts

src/containers/App/App.css

@@ -34,7 +34,7 @@ body input[type="button"],
 body input[type="submit"], 
 body [role="button"], 
 body [onclick] {
-  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 32 32, pointer;
+  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 18 18, pointer;
 }
 
 h1 {
@@ -158,7 +158,7 @@ footer a:hover {
   color: #030303;  /* 自定义文字颜色 */
   /* margin-left: 4vw;
   margin-right: 0vw; */
-  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 32 32, pointer;
+  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 18 18, pointer;
 }
 
 .custom-dropdown-menu.dropdown-item {
@@ -166,7 +166,7 @@ footer a:hover {
   /* background-color: #4d4949; */
   color: #000000;  /* 自定义每个菜单项的文字颜色 */
   border-radius: 50px;
-  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 32 32, pointer;
+  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 18 18, pointer;
 }
 
 .custom-dropdown-menu.dropdown-item:hover {
@@ -539,14 +539,14 @@ footer a:hover {
 
 .side-navbar .nav-link.active {
   background-color: rgb(172, 172, 108);
-  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 32 32, pointer;
+  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 18 18, pointer;
   transform: scale(1.2);
   border-radius: 30px;
 }
 
 .side-navbar .nav-link.notActive {
   background-color: rgb(245, 245, 220);
-  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 32 32, pointer;
+  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 18 18, pointer;
 }
 
 .side-navbar .nav-link.notActive:hover {
@@ -894,4 +894,42 @@ span.formula_line::-webkit-scrollbar-track {
 
 .small-font {
   font-size: small;
-}
\ No newline at end of file
+}
+
+
+.table-head-line {
+  border-bottom:2px solid #000000;
+  border-top: 2px solid #000000;
+  background-color: #e08a3ae5;
+  width: 50vw;
+}
+
+.table-bottom-line {
+  border-bottom:2px solid #000000;
+}
+
+.table-element-yellow {
+  background-color: #faf2af;
+}
+.table-element-yellow:hover {
+  background-color: #faf2af;
+  transform: scale(1.02);
+}
+.table-element-orange {
+  background-color: rgb(233, 188, 146);
+}
+.table-element-orange:hover {
+  background-color: rgb(233, 188, 146);
+  transform: scale(1.02);
+}
+.three-line-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+}
+.th,td {
+  overflow: hidden; 
+    text-overflow: ellipsis;
+    white-space: nowrap; 
+}
+

src/contents/parts.tsx

@@ -29,6 +29,31 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
 };
 // sidenavbar end 
 
+type TableRowData = {
+  id: string;
+  type: string;
+  description: string;
+  class: string;
+  link: string;
+};
+
+const basicParts: TableRowData[] = [
+  { id: 'BBa_K5378000', type: 'Coding', description: 'GS',class:"table-element-yellow",link:'' },
+  { id: 'BBa_K5378001', type: 'Coding', description: 'TPH1',class:"table-element-orange",link:''},
+  { id: 'BBa_K5378006', type: 'Coding', description: 'tynA-G494S',class:"table-element-yellow",link:''},
+  { id: 'BBa_K5378007', type: 'Coding', description: 'feaR-A81L',class:"table-element-orange",link:''},
+  { id: 'BBa_K5378009', type: 'Promoter', description: 'PtynA',class:"table-element-yellow",link:''},
+  { id: 'BBa_K5378016', type: 'RBS', description: 'RBS',class:"table-element-orange",link:''},
+  { id: 'BBa_K5378007', type: 'Coding', description: 'GFP',class:"table-element-yellow table-bottom-line",link:''},
+];
+const compositeParts: TableRowData[] = [
+  { id: 'BBa_K5378002', type: 'Composite', description: 'PtynA-RBS-TPH1',class:"table-element-yellow",link:'' },
+  { id: 'BBa_K5378003', type: 'Composite', description: 'PtynA-RBS-GS',class:"table-element-orange",link:''},
+  { id: 'BBa_K5378004', type: 'Composite', description: 'feaR-A81L-G494S-PtynA-GS',class:"table-element-yellow",link:''},
+  { id: 'BBa_K5378005', type: 'Composite', description: 'feaR-A81L-G494S-PtynA-TPH1',class:"table-element-orange",link:''},
+  { id: 'BBa_K5378010', type: 'Composite', description: 'PtynA-RBS-GFP',class:"table-element-yellow table-bottom-line",link:''},
+];
+
 export function parts() {
     // sidenavbar begin
     const [activeLink, setActiveLink] = useState<string>('');
@@ -71,6 +96,43 @@ export function parts() {
                 <Element name="section1" className="element rounded-border" id='section1'>
                    <h2>Section 1</h2>
                    <p>Content for section 1.</p>
+                   <table className="three-line-table">
+                      <thead>
+                            <tr className='table-head-line'>
+                                <th>Part Name</th>
+                                <th>Type</th>
+                                <th>Short Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {basicParts.map((row) => (
+                                <tr className={row.class} key={row.id}>
+                                    <td><a href={row.link}>{row.id}</a></td>
+                                    <td>{row.type}</td>
+                                    <td>{row.description}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+
+                    <table className="three-line-table">
+                      <thead>
+                            <tr className='table-head-line'>
+                                <th >Part Name</th>
+                                <th >Type</th>
+                                <th >Short Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {compositeParts.map((row) => (
+                                <tr className={row.class} key={row.id}>
+                                    <td><a href={row.link}>{row.id}</a></td>
+                                    <td>{row.type}</td>
+                                    <td>{row.description}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
                    <img 
                   src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
                   alt="example"