Sticly footer to the bottom of the page

src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx

@@ -12,6 +12,7 @@ import {
 } from "components/icons";
 import classNames from "classnames";
 import { Transition } from "@headlessui/react";
+import Link from "components/typography/Link";
 
 const interactionButtonsStore = [
   {
@@ -46,6 +47,7 @@ type ArticleButtonProps = {
   children?: React.ReactNode;
   className?: string;
   emphasis?: "high" | "low";
+  articleID?: string,
 } & Omit<React.ComponentPropsWithoutRef<"button">, "">;
 
 export function ArticleInteractionButtons({
@@ -53,6 +55,7 @@ export function ArticleInteractionButtons({
   children,
   openAbstract = () => { },
   className,
+  articleID,
   emphasis = "high", //to change displaying of component
   ...props
 }: ArticleButtonProps) {
@@ -70,18 +73,31 @@ export function ArticleInteractionButtons({
       </Button.Icon>
     </Button>
   );
-
   const fileInteractionButtons = interactionButtonsStore.map((button) => {
     return (
-      <Button
+      button.title === 'Read file' ?
-        emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
+        <Link
-        className="h-max px-2 mr-2"
+          to={`/article/content/${articleID}`}>
-      >
+          <Button
-        <Button.Icon>
+            emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
-          {React.cloneElement(button.icon, { className: button.iconClassName })}
+            className="h-max px-2 mr-2"
-        </Button.Icon>
+          >
-        {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+            <Button.Icon>
-      </Button>
+              {React.cloneElement(button.icon, { className: button.iconClassName })}
+            </Button.Icon>
+            {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+          </Button>
+        </Link>
+        :
+        <Button
+          emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
+          className="h-max px-2 mr-2"
+        >
+          <Button.Icon>
+            {React.cloneElement(button.icon, { className: button.iconClassName })}
+          </Button.Icon>
+          {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+        </Button>
     );
   });
 

src/components/ArticleSearchResult.tsx

@@ -37,7 +37,7 @@ export const ArticleSearchResult = ({ searchItem }: Props) => {
         <Article.SubscriptionsButtons />
       </div>
 
-      <Article.Title linkTo={`/article/${searchItem.id}`} className="text-2xl">
+      <Article.Title linkTo={`/article/info/${searchItem.id}`} className="text-2xl">
         {searchItem.title}
       </Article.Title>
       <Article.Authors emphasis="low" className="flex flex-wrap flex-row">

src/components/BaseLayout.tsx

@@ -1,3 +1,4 @@
+import { joinClassnames } from "core/helpers";
 import React from "react";
 import { Footer } from "./parts/Footer";
 import Header from "./parts/Header";
@@ -10,10 +11,10 @@ type Props = {
 
 function BaseLayout({ header, footer, children, className }: Props) {
   return (
-    <div className={className}>
+    <div className={joinClassnames(className, 'flex min-h-screen flex-col justify-between')}>
       <Header />
 
-      <main>{children}</main>
+      <main className="flex-1">{children}</main>
 
       <Footer />
     </div>

src/components/fetchAnArticle/AnArticle.tsx

@@ -46,7 +46,10 @@ const AnArticle = () => {
               <hr></hr>
             </div>
 
-            <ArticlePart.Article.InteractionButtons emphasis="high" />
+            <ArticlePart.Article.InteractionButtons
+              emphasis="high"
+              articleID={article?.id}
+            />
             {article?.tags && (
               <div className="keywords my-10 flex flex-col gap-2">
                 <Typography

src/core/helpers.ts

@@ -8,10 +8,17 @@ export const handleScrollTo = (e: React.MouseEvent<HTMLAnchorElement>) => {
   }
 };
 
-export function capitalization (str: string) {
+export function capitalization(str: string): string {
-  return str.substring(0,1).toUpperCase() + str.substring(1);
+  return str.substring(0, 1).toUpperCase() + str.substring(1);
 }
 
-export function formatNumber(num: number) {
+export function formatNumber(num: number): string {
   return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
+}
+
+export function joinClassnames(first?: string, second?: string): string {
+  return [
+    first ?? '',
+    second ?? '',
+  ].join('');
 }

src/index.tsx

@@ -17,6 +17,8 @@ import { store } from "store/store";
 import { Provider } from "react-redux";
 import { SearchResultsPage } from "pages/SearchResultsPage";
 import AnArticle from "components/fetchAnArticle/AnArticle";
+import NotFound from "components/fetchAnArticle/NotFound";
+import AnArticleBody from "components/fetchAnArticle/AnArticleBody";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) throw new Error("Failed to find the root element");
@@ -33,7 +35,10 @@ root.render(
           <Route path="/terms-of-use" element={<TermsOfUse />} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />
           <Route path="/cookies-policy" element={<CookiesPolicy />} />
-          <Route path="/article/:id" element={<AnArticle />} />
+          <Route path="/article">
+            <Route path="info/:id" element={<AnArticle />} />
+            <Route path="content/:id" element={<AnArticleBody />} />
+          </Route>
           <Route path="/account">
             <Route path="settings" element={<AccountSettings />} />
           </Route>

src/pages/SearchResultsPage.tsx

@@ -13,7 +13,7 @@ export const SearchResultsPage = () => {
       <SearchSection />
       <ColumnLayout>
         <ColumnLayout.Left>
-          <div className="h-98 bg-blue-200 w-[300px]">left bar</div>
+          <div className="h-98 w-[300px]"></div>
         </ColumnLayout.Left>
         <ColumnLayout.Main>
           <SearchResultSection />