titaned-frontend-library 1.0.1

package/dist/interfaces/components.d.ts

@@ -0,0 +1,181 @@
+export interface TextComponentProps {
+    text: string;
+    iconName?: React.ReactNode;
+    iconPlacement?: "before" | "after";
+    fontClass?: string;
+    className?: string;
+}
+export interface ButtonComponentProps {
+    label: string;
+    variant?: "text" | "contained" | "outlined";
+    color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    disabled?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    className?: string;
+    onClick?: any;
+    type?: "button" | "submit" | "reset";
+}
+export interface AlertComponentProps {
+    open: boolean;
+    onClose: () => void;
+    severity?: "error" | "warning" | "info" | "success";
+    title?: string;
+    message: string;
+    autoHideDuration?: number;
+}
+export interface Menu {
+    label: string;
+    subMenu?: {
+        label: string;
+        value: string;
+    }[];
+}
+export interface TemplateData {
+    logoUrl?: string;
+    menu?: {
+        align?: "right" | "left" | "center";
+        menuList: Menu[];
+        loginSignupButtons?: boolean;
+    };
+}
+export interface MeiliSearchConfig {
+    host: string;
+    apiKey: string;
+    indexName: string;
+    client?: any;
+}
+export interface MeiliSearchResult {
+    id: string;
+    display_name: string;
+    type: string;
+    description?: string;
+    published?: string;
+    url?: string;
+    block_type?: string;
+    block_id?: string;
+    content?: {
+        problem_types?: string[];
+        html_content?: string;
+    };
+    _formatted?: {
+        display_name?: string;
+        description?: string;
+        published?: string;
+    };
+    context_key?: string;
+    usage_key?: string;
+    breadcrumbs?: Array<{
+        display_name: string;
+        usage_key?: string;
+    }>;
+    org?: string;
+    access_id?: number;
+    contextKey?: string;
+    usageKey?: string;
+    formatted?: {
+        displayName: string;
+        content?: {
+            htmlContent?: string;
+            capaContent?: string;
+        };
+    };
+}
+export interface MeiliSearchResponse {
+    results: Array<{
+        indexUid: string;
+        hits: MeiliSearchResult[];
+        query: string;
+        processingTimeMs: number;
+        limit: number;
+        offset: number;
+        estimatedTotalHits: number;
+        facetDistribution?: {
+            block_type?: Record<string, number>;
+            'content.problem_types'?: Record<string, number>;
+        };
+    }>;
+}
+export interface MainHeaderProps {
+    logoUrl: string;
+    menuAlignment: 'right' | 'left' | 'center';
+    menuList: {
+        label: string;
+        subMenu?: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+    loginSignupButtons: boolean;
+    authenticatedUser?: any;
+    config?: any;
+    userMenuItems?: any;
+    onLanguageChange?: () => void;
+    getBaseUrl?: () => string;
+    meiliSearchConfig?: MeiliSearchConfig;
+    languageSelectorList?: Record<string, string>[];
+    headerButtons?: {
+        reSync?: boolean;
+        contextSwitcher?: boolean;
+        help?: boolean;
+        translation?: boolean;
+        notification: boolean;
+    };
+}
+export interface HeaderMenuProps {
+    menu: {
+        label: string;
+        subMenu?: {
+            label: string;
+            value: string;
+        }[];
+    };
+}
+export interface MenuComponentProps {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    menuItems: {
+        label: string;
+        value: string;
+    }[];
+    onSelect?: (value: string) => void;
+}
+type TextAlign = 'right' | 'left' | 'center';
+export interface FooterProps {
+    contactInfo: {
+        align: TextAlign;
+        content: {
+            shortdesc: string;
+            address1: string;
+            address2: string;
+            pincode: string;
+            location: {
+                label: string;
+                value: string;
+            };
+            phonenumber: string;
+            facebook: string;
+            instagram: string;
+            twitter: string;
+            linkedIn: string;
+        };
+    };
+    quickLinks: {
+        align: TextAlign;
+        content: {
+            label: string;
+            link: string;
+        }[];
+    };
+    exploreLinks: {
+        align: TextAlign;
+        content: {
+            label: string;
+            link: string;
+        }[];
+    };
+    logoUrl: string;
+    copyrights: string;
+}
+export {};

package/dist/providers/SidebarProvider.d.ts

@@ -0,0 +1,4 @@
+import { default as React, ReactNode } from 'react';
+export declare const SidebarProvider: React.FC<{
+    children: ReactNode;
+}>;

package/dist/services/meiliSearchService.d.ts

@@ -0,0 +1,47 @@
+import { MeiliSearchConfig, MeiliSearchResult } from '../interfaces/components';
+export interface MeiliSearchClientHeaders {
+    'Content-Type': string;
+    'Authorization': string;
+    'X-Meilisearch-Client': string;
+}
+export interface SearchOptions {
+    limit?: number;
+    offset?: number;
+    filter?: string[];
+    attributesToHighlight?: string[];
+    attributesToCrop?: string[];
+    sort?: string[];
+}
+export interface SearchResult {
+    hits: MeiliSearchResult[];
+    totalHits: number;
+    facets?: {
+        block_type?: Record<string, number>;
+        'content.problem_types'?: Record<string, number>;
+    };
+    processingTimeMs: number;
+}
+export declare class MeiliSearchService {
+    private config;
+    private headers;
+    constructor(config: MeiliSearchConfig);
+    /**
+     * Update headers from MeiliSearch client object
+     * This allows you to use the exact headers from your console logs
+     */
+    updateHeadersFromClient(client: any): void;
+    /**
+     * Performs a search using MeiliSearch multi-search API
+     * This matches the exact payload structure from your console logs
+     */
+    search(query: string, options?: SearchOptions): Promise<SearchResult>;
+    /**
+     * Performs a simple search without facets (for basic search functionality)
+     */
+    simpleSearch(query: string, options?: SearchOptions): Promise<SearchResult>;
+    /**
+     * Check if the MeiliSearch service is available
+     */
+    checkConnection(): Promise<boolean>;
+}
+export declare const createMeiliSearchService: (config: MeiliSearchConfig) => MeiliSearchService;

package/dist/utils/searchNavigation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Utility functions for search result navigation
+ * Based on the Open edX authoring search navigation logic
+ */
+export interface SearchHit {
+    id: string;
+    blockType: string;
+    contextKey?: string;
+    usageKey?: string;
+    breadcrumbs?: Array<{
+        displayName: string;
+        usageKey?: string;
+    }>;
+}
+/**
+ * Returns the URL Suffix for library/library component hit
+ */
+export declare function getLibraryComponentUrlSuffix(hit: SearchHit): string;
+/**
+ * Returns the URL Suffix for a unit hit
+ */
+export declare function getUnitUrlSuffix(hit: SearchHit): string;
+/**
+ * Returns the URL Suffix for a unit component hit
+ */
+export declare function getUnitComponentUrlSuffix(hit: SearchHit): string;
+/**
+ * Returns the URL Suffix for a course component hit
+ */
+export declare function getCourseComponentUrlSuffix(hit: SearchHit): string;
+/**
+ * Returns the URL Suffix for the search hit param
+ */
+export declare function getUrlSuffix(hit: SearchHit): string;
+/**
+ * Generates the full URL for a search hit
+ * Based on the Open edX authoring URL pattern
+ */
+export declare function getSearchHitUrl(hit: SearchHit, baseUrl?: string): string;
+/**
+ * Handles navigation for a search hit
+ */
+export declare function navigateToSearchHit(hit: SearchHit, baseUrl?: string, onNavigate?: (url: string) => void): string;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/next.config.ts

@@ -0,0 +1,35 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['titaned-lib'],
+  experimental: {
+    turbo: {
+      rules: {
+        "*.mdx": ["mdx-loader"],
+      },
+    },
+  },
+  async rewrites() {
+    console.log('Rewrites are being applied!');
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://local.openedx.io:8000/:path*',
+      },
+    ];
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "miro.medium.com",
+      },
+      {
+        protocol: "https",
+        hostname: "studyhub-nextjs.vercel.app"
+      }
+    ],
+  },
+};
+
+export default nextConfig; 

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "titaned-frontend-library",
+  "version": "1.0.1",
+  "description": "A comprehensive React TypeScript component library for TitanEd applications",
+  "author": "TitanEd Team",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@edx/frontend-platform": "8.0.3",
+    "@openedx/paragon": "22.0.0",
+    "axios": "^1.8.4",
+    "meilisearch": "0.40.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-responsive-carousel": "^3.2.23",
+    "sass": "1.79.0",
+    "universal-cookie": "^8.0.1"
+  },
+  "peerDependencies": {
+    "@edx/frontend-platform": "8.0.3",
+    "@openedx/paragon": "22.0.0",
+    "meilisearch": "0.40.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-responsive-carousel": "^3.2.23",
+    "sass": "1.79.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@openedx/paragon": "^23.14.3",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-static-copy": "^2.3.1"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/@edx-frontend-platform-i18n.d.ts

@@ -0,0 +1 @@
+ 

package/src/App.css

@@ -0,0 +1,66 @@
+#root {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.app-container {
+  /* top: 0; */
+  
+}
+
+.welcome-text {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.demo-button {
+  min-width: 200px;
+}
+
+
+.primary-button {
+  background-color: var(--c1);
+}
+
+.outlined-button {
+  border-color: blueviolet !important;
+}

package/src/App.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import './App.css'
+import axios from 'axios'
+import { FooterProps, TemplateData } from './interfaces/components'
+import Footer from './components/common/Footer/Footer'
+// import MainHeader from './components/common/Header/MainHeader'
+
+function App() {
+  // const [showAlert, setShowAlert] = useState(false)
+  const [templateData, setTemplateData] = useState<TemplateData | undefined>(undefined)
+  const [footerData, setFooterData] = useState<FooterProps | undefined>(undefined);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get("http://localhost:5000/templateData", {
+          headers: { "Cache-Control": "no-store" },
+        })
+        console.log("Fetched Theme Data:", response.data?.content?.header?.mainHeader)
+        setTemplateData(response.data?.content?.header?.mainHeader)
+        setFooterData(response.data?.content?.footer)
+      } catch (error) {
+        console.error("Error fetching data:", error)
+      }
+    }
+
+    fetchData()
+  }, [])
+
+  return (
+    <div className="app-container">
+      {/* {templateData?.logoUrl && templateData.menu?.align && templateData.menu.menuList && templateData.menu.loginSignupButtons && (
+        <MainHeader
+          logoUrl={templateData.logoUrl}
+          menuAlignment={templateData.menu.align}
+          menuList={templateData.menu.menuList}
+          loginSignupButtons={templateData.menu.loginSignupButtons}
+        />
+      )} */}
+
+      {footerData?.contactInfo && footerData?.quickLinks && footerData?.exploreLinks && templateData?.logoUrl && (
+        <Footer
+          contactInfo={footerData.contactInfo}
+          quickLinks={footerData.quickLinks}
+          exploreLinks={footerData.exploreLinks}
+          logoUrl={templateData.logoUrl}
+          copyrights={footerData.copyrights}
+        />
+      )}
+    </div>
+  )
+}
+
+export default App

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/common/Button/ButtonComponent.scss

@@ -0,0 +1,3 @@
+.button-container {
+  margin: 8px;
+} 

package/src/components/common/Button/ButtonComponent.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ButtonComponentProps } from '../../../interfaces/components';
+// import { Button } from '@mui/material';
+import './ButtonComponent.scss';
+
+const ButtonComponent: React.FC<ButtonComponentProps> = ({
+    label,
+    variant,
+    color,
+    disabled,
+    startIcon,
+    endIcon,
+    className,
+    onClick,
+    type
+}) => {
+    return (
+        // <Button
+        //     className={`button-class ${className}`}
+        //     variant={variant}
+        //     color={color}
+        //     onClick={onClick}
+        //     disabled={disabled}
+        //     startIcon={startIcon}
+        //     endIcon={endIcon}
+        //     type={type}
+        // >
+        //     {label}
+        // </Button>
+        <></>
+    );
+};
+
+export default ButtonComponent; 

package/src/components/common/Footer/Footer.scss

@@ -0,0 +1,87 @@
+.footer {
+  background-color: #000000;
+  padding: 1rem 2rem;
+  color: #ffffff;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  height: 15rem;
+}
+
+/* All sections default styles */
+.section {
+  flex: 1;
+  margin: 1rem;
+  min-width: 12.5rem;
+  display: flex;
+  flex-direction: column;
+  text-align: left; /* Always keep text aligned left */
+
+  .footer-brand-logo {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      object-fit: contain;
+      max-height: 5rem;
+    }
+  }
+}
+
+/* Alignment classes using flex order */
+.left {
+  order: 1;
+  align-items: flex-start;
+}
+
+.center {
+  order: 2;
+  align-items: center;
+}
+
+.right {
+  order: 3;
+  align-items: flex-end;
+}
+
+.section h3 {
+  color: #ffffff;
+  margin-bottom: 1rem;
+  /* margin-left: -1.5rem; */
+}
+
+.section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.section ul li {
+  margin-bottom: 0.625rem;
+}
+
+.section ul li a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.section ul li a:hover {
+  text-decoration: underline;
+}
+
+.copyright {
+  text-align: center;
+  margin-top: 1.25rem;
+  font-size: 0.875rem;
+  color: #737477;
+}
+
+.h3Adjust {
+  margin-left: -1.5rem;
+}