combined button files

src/App/App.tsx

@@ -8,7 +8,7 @@ import { Navbar } from "../components/Navbar.tsx";
 import { getPathMapping } from "../utils/getPathMapping.ts";
 import { stringToSlug } from "../utils/stringToSlug.ts";
 import { useEffect} from "react";
-import Villbuttonrow from "../components/Villagebuttons.tsx";
+import { Villbuttonrow } from "../components/Buttons.tsx";
 /* import Sidebar from "../components/Sidebar.tsx"; */
 import "../utils/highlight.js";
 import "../../pubpub/mapscript.js"

src/components/Villagebuttons.tsx → src/components/Buttons.tsx

 import { Link } from "react-router-dom";
 
+interface UrlButtonProps{
+    href: string,
+    children: string,
+  };
+
+
 export function Villagebutton({ title, source, page }: { title: string; source: string; page:string}) {
   return (
     <Link className="btn village-style-button" role="button" to={page}>
@@ -19,9 +25,50 @@ export function Villbuttonrow(){
         <Villagebutton page="/engineering" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
         <Villagebutton page="/safety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
         <Villagebutton page="/results" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
-      
       </div>  
   )
 }
 
-export default Villbuttonrow; // Don’t forget to use export default!
\ No newline at end of file
+
+export const UrlButton = ({ href, children }:UrlButtonProps) => {
+    return (
+      <a href={href} className="url-button">
+        {children}
+      </a>
+    );
+  }
+
+
+
+
+export const DownloadLink = ({ url, fileName }: {url: string, fileName: string}) => {
+const handleDownload = () => {
+    fetch(url)
+    .then((response) => response.blob())
+    .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileName || "downloaded-file";
+        document.body.appendChild(link);
+
+        link.click();
+
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    })
+    .catch((error) => {
+        console.error("Error fetching the file:", error);
+    });
+};
+  
+return (
+
+    <a type="button" onClick={handleDownload} className="download-butt">
+        Download
+    </a>
+
+);
+};
+  
+  
\ No newline at end of file

src/components/DownloadButton.tsx

-
-export const DownloadLink = ({ url, fileName }: {url: string, fileName: string}) => {
-  const handleDownload = () => {
-    fetch(url)
-      .then((response) => response.blob())
-      .then((blob) => {
-        const url = window.URL.createObjectURL(new Blob([blob]));
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = fileName || "downloaded-file";
-        document.body.appendChild(link);
-
-        link.click();
-
-        document.body.removeChild(link);
-        window.URL.revokeObjectURL(url);
-      })
-      .catch((error) => {
-        console.error("Error fetching the file:", error);
-      });
-  };
-
-  return (
-
-      <a type="button" onClick={handleDownload} className="download-butt">
-        Download
-      </a>
-
-  );
-};
-

src/components/Filter.tsx

@@ -8,7 +8,7 @@ interface Props {
   value: string,
   label: string
 }
-const options =[
+const wikioptions =[
   {value: "all", label: "Show all"},
   {value: "react", label: "React"},
   {value: "type", label: "Types"},
@@ -119,15 +119,15 @@ function w3RemoveClass(element: Element, name: string) {
 }
 
 
-export function Selector(){
+export function WikiSelector(){
   return(
     <div>
-      <Action></Action>
+      <WikiAction></WikiAction>
     </div>
   )
 }
 
-class Action extends React.Component {
+class WikiAction extends React.Component {
   state = {
     selectedOption: null,
   };
@@ -147,8 +147,8 @@ class Action extends React.Component {
         value={selectedOption}
         onChange={this.handleChange}
         isMulti
-        options={options}
-        defaultValue={[options[0]]}
+        options={wikioptions}
+        defaultValue={[wikioptions[0]]}
         className="basic-multi-select"
         classNamePrefix="select"
       />
@@ -158,4 +158,54 @@ class Action extends React.Component {
 
 /* Type '(selectedOption: Props | null) => void' is not assignable to type '(newValue: MultiValue<{ value: string; label: string; } | null>, actionMeta: ActionMeta<{ value: string; label: string; } | null>) => void'.
   Types of parameters 'selectedOption' and 'newValue' are incompatible.
-    Type 'readonly ({ value: string; label: string; } | null)[]' is missing the following properties from type 'Props': value, label */
\ No newline at end of file
+    Type 'readonly ({ value: string; label: string; } | null)[]' is missing the following properties from type 'Props': value, label */
+    /* const hpoptions =[
+      {value: "all", label: "All"},
+      {value: "Academia", label: "Academia"},
+      {value: "PatientPatient", label: "Patient"},
+      {value: "Medical", label: "Medical Professional"},
+      {value: "property", label: "Properties"},
+      {value: "pipeline", label: "GitLab Pipeline"},
+      {value: "html", label: "HTML"},
+      {value: "css", label: "CSS"},
+      
+    ]
+
+    export function HPSelector(){
+      return(
+        <div>
+          <HPAction></HPAction>
+        </div>
+      )
+    }
+
+
+
+    class HPAction extends React.Component {
+      state = {
+        selectedOption: null,
+      };
+      handleChange = (selectedOption: any) => {
+        
+        this.setState({ selectedOption }, () =>
+        console.log(`Option selected:`, this.state.selectedOption)
+         
+        );
+          filterMultiSelection(selectedOption)
+      };
+      render() {
+        const { selectedOption } = this.state;
+    
+        return (
+          <Select
+            value={selectedOption}
+            onChange={this.handleChange}
+            isMulti
+            options={hpoptions}
+            defaultValue={[hpoptions[0]]}
+            className="basic-multi-select"
+            classNamePrefix="select"
+          />
+        );
+      }
+    } */
\ No newline at end of file

src/components/HorizontalTimeline.tsx

- 
+
 
 function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
-    let cl = "t-tag " + tag; 
+    let cl = "t-tag " + tag;
     return(
     <li className="timelineolli">
       <div className="timeline-item moretop">
@@ -45,7 +45,6 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
   
     return(
     <div>
-    
   <section className="timeline row align-items-center">
   <ol className="timelineol">
     <AllItems></AllItems>

src/components/UrlButton.tsx

-
- const UrlButton = ({ href, children }:UrlButtonProps) => {
-
-  return (
-    <a href={href} className="url-button">
-      {children}
-    </a>
-  );
-}
-export default UrlButton; 
-interface UrlButtonProps{
-  href: string,
-  children: string,
-};

src/components/pdfs.tsx

-import { DownloadLink } from './DownloadButton';
+import { DownloadLink } from "./Buttons"
 
 
 export function PDF({link, name}: {link: string, name:string}){

src/components/seclarations.ts

 
-export * from './Villagebuttons.tsx';
+export * from './Buttons.tsx'
 export * from './headings.tsx';
 export * from './Sidebar.tsx';
   

src/contents/human-practices.tsx

@@ -17,7 +17,9 @@ export function HumanPractices() {
 
   return (
     <>
-    
+    <div className="row align-items-center bottom-buttons">
+
+    </div>
     <AllPopus></AllPopus>
     <TimeHori></TimeHori>
     <div>

src/contents/wiki.tsx

@@ -166,13 +166,13 @@ function Started(){
 
 
 
-import { Selector } from "../components/Filter";
+import { WikiSelector } from "../components/Filter";
 function Troubleshooting(){
   
   return(
     <div>
       Please select what you want to troubleshoot for. 
-      <Selector></Selector>
+      <WikiSelector></WikiSelector>
       <div id="nono" className="noshow">
         This combination returns no instances. 
       </div>