pdfequips-footer 0.0.0

package/src/index.scss

@@ -0,0 +1,11 @@
+// these are two packages i installed
+@import "cssmolecule";
+@import "custom-bs";
+@import "./scss/mixins";
+@include bootstrap;
+
+body {
+    min-height: 2040px;
+}
+
+@import "./scss/footer";

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { Footer } from './Footer'
+import "./index.scss";
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Footer title="PDF Equips" lang='ar' />
+  </StrictMode>,
+)

package/src/scss/_footer.scss

@@ -0,0 +1,93 @@
+body {
+    @include extend("position-relative");
+}
+
+.container {
+    @include extend("container");
+}
+
+footer {
+    @include extend("py-5 border-top position-absolute w-100");
+    bottom: 0; // outline: 1px solid;
+
+    @include ar-wrapper {
+        @include extend("text-right");
+    }
+
+    .footer-wrapper {
+        @include extend("row");
+
+
+        .copyright-row {
+            @include extend("col-12 col-md-8 d-flex p0 justify-content-between");
+            flex: 1;
+
+            >* {
+                @include extend("m0 p0");
+            }
+
+            .copyright-text {
+                @include extend("col-6 text-muted col-6 col-md-10 mb-0 py-0");
+                align-self: stretch;
+            }
+
+            .socials {
+                @include extend("col d-flex justify-content-between align-items-center");
+
+                .facebook {
+                    color: #1877f2;
+                }
+
+                .twitter {
+                    color: #000000;
+                }
+
+                .instagram {
+                    fill: url(#rg);
+                }
+
+
+
+                .linkedin {
+                    color: #0a66c2;
+                }
+            }
+        }
+
+        .terms-col {
+            @include extend("col");
+        }
+    }
+
+    .bottom-row {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+        @include extend("mt-5");
+
+        strong {
+            @include extend("d-block mb-2");
+        }
+
+        .footer-links {
+            @include extend("list-unstyled list-group d-flex flex-column");
+
+
+            li {
+                @include extend("mb-2");
+
+                a {
+                    @include extend("list-group-item list-group-item-action text-decoration-none mb-1 border-0");
+
+                    @include all-langs {
+                        margin-left: -1em;
+                    }
+
+                    @include ar-wrapper {
+                        margin-right: -1em;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/_mixins.scss

@@ -0,0 +1,48 @@
+@mixin all-langs {
+    :not([lang="ar"]) & {
+        @content;
+    }
+}
+
+@mixin ar-wrapper {
+    [lang="ar"] & {
+        @content;
+    }
+}
+
+@mixin bootstrap {
+    @include reboot;
+    @include root;
+    @include type;
+    @include images;
+    @include containers;
+    @include grid;
+    @include tables;
+    @include forms;
+    @include buttons;
+    @include transitions;
+    @include dropdown;
+    @include button-group;
+    @include nav;
+    @include navbar;
+    @include card;
+    @include accordion;
+    @include breadcrumb;
+    @include pagination;
+    @include badge;
+    @include alert;
+    @include progress;
+    @include list-group;
+    @include close;
+    @include toasts;
+    @include modal;
+    @include tooltip;
+    @include popover;
+    @include carousel;
+    @include spinners;
+    @include offcanvas;
+    @include placeholders;
+    @include helpers;
+    @include api;
+    @include nav;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})