mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-10 06:10:17 -04:00
Merge pull request #1 from cssgunc/mel-GEN-14-code-architecture-setup
Organized files and added basic components
This commit is contained in:
Meliora Ho
GitHub
commit
172661cbc5
36
README.md
36
README.md
|
|
@ -1 +1,35 @@
|
||||||
# compass
|
# 🧭 Compass Center's Internal Resource Management App
|
||||||
|
|
||||||
|
## 🛠 Technologies
|
||||||
|
- Next.js
|
||||||
|
- TailwindCSS
|
||||||
|
- TypeScript
|
||||||
|
- PostgreSQL
|
||||||
|
|
||||||
|
## 📁 File Setup
|
||||||
|
```
|
||||||
|
\compass
|
||||||
|
\components // Components organized in folders related to specific pages
|
||||||
|
\pages // Store all pages here
|
||||||
|
\api // API routes
|
||||||
|
\public // Local assets (minimize usage)
|
||||||
|
\utils // Constants, Routes, Classes, Dummy Data
|
||||||
|
\styles // CSS files
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 To Start
|
||||||
|
Follow these steps to set up your local environment:
|
||||||
|
```
|
||||||
|
\\ Clone this repository
|
||||||
|
git clone https://github.com/cssgunc/compass.git
|
||||||
|
\\ Go into main folder
|
||||||
|
cd compass
|
||||||
|
\\ Install dependencies
|
||||||
|
npm install
|
||||||
|
\\ Run local environment
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## 💡 Dev Notes
|
||||||
|
- For each task, create a branch in the format '[your name]-[ticket number]-[task description]'
|
||||||
|
- Only commit your work to that branch and then make a git request to '/main'
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -1,27 +0,0 @@
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 0, 0, 0;
|
|
||||||
--background-start-rgb: 214, 219, 220;
|
|
||||||
--background-end-rgb: 255, 255, 255;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 255, 255, 255;
|
|
||||||
--background-start-rgb: 0, 0, 0;
|
|
||||||
--background-end-rgb: 0, 0, 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: rgb(var(--foreground-rgb));
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
transparent,
|
|
||||||
rgb(var(--background-end-rgb))
|
|
||||||
)
|
|
||||||
rgb(var(--background-start-rgb));
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
import type { Metadata } from 'next'
|
import '../styles/globals.css';
|
||||||
import { Inter } from 'next/font/google'
|
import { Metadata } from 'next'
|
||||||
import './globals.css'
|
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] })
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Create Next App',
|
title: 'Login',
|
||||||
description: 'Generated by create next app',
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
|
// Layouts must accept a children prop.
|
||||||
|
// This will be populated with nested layouts or pages
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={inter.className}>{children}</body>
|
<body>{children}</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -1,113 +1,41 @@
|
||||||
import Image from 'next/image'
|
// pages/index.tsx
|
||||||
|
|
||||||
export default function Home() {
|
import Button from '@/components/Button';
|
||||||
return (
|
import Input from '@/components/Input'
|
||||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
import InlineLink from '@/components/InlineLink';
|
||||||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
|
import Paper from '@/components/auth/Paper';
|
||||||
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
|
import { Metadata } from 'next'
|
||||||
Get started by editing
|
|
||||||
<code className="font-mono font-bold">app/page.tsx</code>
|
export const metadata: Metadata = {
|
||||||
</p>
|
title: 'Login',
|
||||||
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
|
|
||||||
<a
|
|
||||||
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
By{' '}
|
|
||||||
<Image
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel Logo"
|
|
||||||
className="dark:invert"
|
|
||||||
width={100}
|
|
||||||
height={24}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
|
|
||||||
<Image
|
|
||||||
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js Logo"
|
|
||||||
width={180}
|
|
||||||
height={37}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
|
||||||
Docs{' '}
|
|
||||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
|
||||||
->
|
|
||||||
</span>
|
|
||||||
</h2>
|
|
||||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
|
||||||
Find in-depth information about Next.js features and API.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
|
||||||
Learn{' '}
|
|
||||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
|
||||||
->
|
|
||||||
</span>
|
|
||||||
</h2>
|
|
||||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
|
||||||
Learn about Next.js in an interactive course with quizzes!
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
|
||||||
Templates{' '}
|
|
||||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
|
||||||
->
|
|
||||||
</span>
|
|
||||||
</h2>
|
|
||||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
|
||||||
Explore the Next.js 13 playground.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
|
||||||
Deploy{' '}
|
|
||||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
|
||||||
->
|
|
||||||
</span>
|
|
||||||
</h2>
|
|
||||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
|
||||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Paper>
|
||||||
|
<form className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Input type='email' title="Email" placeholder="janedoe@gmail.com" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<Input type='password' title="Password" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-left space-y-4">
|
||||||
|
<InlineLink>
|
||||||
|
Forgot password?
|
||||||
|
</InlineLink>
|
||||||
|
<Button>
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<p className="text-center mt-6 text-gray-500 text-xs">
|
||||||
|
© 2024 Compass Center
|
||||||
|
</p>
|
||||||
|
</Paper>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
|
||||||
23
compass/components/Button.tsx
Normal file
23
compass/components/Button.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { FunctionComponent, ReactNode } from 'react';
|
||||||
|
|
||||||
|
type ButtonProps = {
|
||||||
|
children: ReactNode;
|
||||||
|
onClick?: () => void; // make the onClick handler optional
|
||||||
|
};
|
||||||
|
|
||||||
|
const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
// className="px-4 py-2 font-bold text-white bg-purple-600 rounded hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-opacity-var focus:ring-color-var"
|
||||||
|
className="inline-block rounded border border-purple-600 bg-purple-600 px-12 py-3 text-sm font-semibold text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500"
|
||||||
|
onClick={onClick}
|
||||||
|
// style={{
|
||||||
|
// '--ring-opacity-var': `var(--ring-opacity)`,
|
||||||
|
// '--ring-color-var': `rgba(var(--ring-color), var(--ring-opacity))`
|
||||||
|
// }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Button;
|
||||||
16
compass/components/InlineLink.tsx
Normal file
16
compass/components/InlineLink.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import React, { ReactNode } from 'react';
|
||||||
|
|
||||||
|
interface Link {
|
||||||
|
href?: string;
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const InlineLink: React.FC<Link> = ({href = '#', children}) => {
|
||||||
|
return (
|
||||||
|
<a href={href} className='text-sm text-purple-600 hover:underline font-semibold italic'>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InlineLink;
|
||||||
30
compass/components/Input.tsx
Normal file
30
compass/components/Input.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react';
|
||||||
|
|
||||||
|
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
|
||||||
|
icon?: ReactNode;
|
||||||
|
title?: ReactNode;
|
||||||
|
title?:ReactNode;
|
||||||
|
placeholder?:ReactNode
|
||||||
|
};
|
||||||
|
|
||||||
|
const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, ...rest }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor={title}
|
||||||
|
className="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
|
||||||
|
>
|
||||||
|
<span className="text-xs font-semibold text-gray-700"> {title} </span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
id={title}
|
||||||
|
placeholder={placeholder}
|
||||||
|
className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Input;
|
||||||
15
compass/components/auth/Paper.tsx
Normal file
15
compass/components/auth/Paper.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import React, { ReactNode } from 'react';
|
||||||
|
|
||||||
|
interface PageInterface {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Paper: React.FC<PageInterface> = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<div className="w-full min-h-screen px-4 py-16 bg-gray-100 sm:px-6 lg:px-8">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Paper;
|
||||||
9
compass/package-lock.json
generated
9
compass/package-lock.json
generated
|
|
@ -8,6 +8,7 @@
|
||||||
"name": "compass",
|
"name": "compass",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@heroicons/react": "^2.1.1",
|
||||||
"next": "13.5.6",
|
"next": "13.5.6",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18"
|
"react-dom": "^18"
|
||||||
|
|
@ -113,6 +114,14 @@
|
||||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@heroicons/react": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">= 16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@humanwhocodes/config-array": {
|
"node_modules/@humanwhocodes/config-array": {
|
||||||
"version": "0.11.13",
|
"version": "0.11.13",
|
||||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
|
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
|
||||||
|
|
|
||||||
|
|
@ -9,19 +9,20 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@heroicons/react": "^2.1.1",
|
||||||
|
"next": "13.5.6",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18"
|
||||||
"next": "13.5.6"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "^5",
|
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^18",
|
"@types/react": "^18",
|
||||||
"@types/react-dom": "^18",
|
"@types/react-dom": "^18",
|
||||||
"autoprefixer": "^10",
|
"autoprefixer": "^10",
|
||||||
|
"eslint": "^8",
|
||||||
|
"eslint-config-next": "13.5.6",
|
||||||
"postcss": "^8",
|
"postcss": "^8",
|
||||||
"tailwindcss": "^3",
|
"tailwindcss": "^3",
|
||||||
"eslint": "^8",
|
"typescript": "^5"
|
||||||
"eslint-config-next": "13.5.6"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
compass/public/fonts/Inter-Black.ttf
Normal file
BIN
compass/public/fonts/Inter-Black.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-Bold.ttf
Normal file
BIN
compass/public/fonts/Inter-Bold.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-ExtraBold.ttf
Normal file
BIN
compass/public/fonts/Inter-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-ExtraLight.ttf
Normal file
BIN
compass/public/fonts/Inter-ExtraLight.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-Light.ttf
Normal file
BIN
compass/public/fonts/Inter-Light.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-Medium.ttf
Normal file
BIN
compass/public/fonts/Inter-Medium.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-Regular.ttf
Normal file
BIN
compass/public/fonts/Inter-Regular.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-SemiBold.ttf
Normal file
BIN
compass/public/fonts/Inter-SemiBold.ttf
Normal file
Binary file not shown.
BIN
compass/public/fonts/Inter-Thin.ttf
Normal file
BIN
compass/public/fonts/Inter-Thin.ttf
Normal file
Binary file not shown.
47
compass/styles/globals.css
Normal file
47
compass/styles/globals.css
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
/* globals.css */
|
||||||
|
@import 'tailwindcss/base';
|
||||||
|
@import 'tailwindcss/components';
|
||||||
|
@import 'tailwindcss/utilities';
|
||||||
|
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Colors */
|
||||||
|
--ring-color: 199, 21, 133;
|
||||||
|
/* This is the RGB value for a purple color */
|
||||||
|
--ring-opacity: 0.5;
|
||||||
|
|
||||||
|
/* Shadows */
|
||||||
|
--shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||||
|
--shadow-focus: 0 0 0 3px rgba(66, 153, 225, 0.5);
|
||||||
|
|
||||||
|
/* Borders */
|
||||||
|
--border-radius: 0.375rem;
|
||||||
|
/* 6px */
|
||||||
|
--border-width: 1px;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--spacing-px: 1px;
|
||||||
|
--spacing-2: 0.5rem;
|
||||||
|
/* 8px */
|
||||||
|
--spacing-3: 0.75rem;
|
||||||
|
/* 12px */
|
||||||
|
|
||||||
|
/* Font */
|
||||||
|
--font-color: #4a5568;
|
||||||
|
/* A shade of gray */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url('/fonts/Inter-Regular.ttf') format('ttf'),
|
||||||
|
url('/fonts/Inter-Bold.ttf') format('ttf'),
|
||||||
|
url('/fonts/Inter-Black.ttf') format('ttf'),
|
||||||
|
url('/fonts/Inter-ExtraBold.ttf') format('ttf'),
|
||||||
|
url('/fonts/Inter-ExtraLight.ttf') format('ttf'),
|
||||||
|
url('/fonts/Inter-Medium.ttf') format('ttf'),
|
||||||
|
url('/fonts/Inter-SemiBold.ttf') format('ttf'),
|
||||||
|
url('/fonts/Inter-Thin.ttf') format('ttf');
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import type { Config } from 'tailwindcss'
|
import type { Config } from 'tailwindcss';
|
||||||
|
|
||||||
const config: Config = {
|
const config: Config = {
|
||||||
content: [
|
content: [
|
||||||
|
|
@ -10,11 +10,14 @@ const config: Config = {
|
||||||
extend: {
|
extend: {
|
||||||
backgroundImage: {
|
backgroundImage: {
|
||||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||||
'gradient-conic':
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'sans-serif'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
}
|
};
|
||||||
export default config
|
|
||||||
|
export default config;
|
||||||
|
|
|
||||||
16
compass/utils/classes/CollectionImpl.tsx
Normal file
16
compass/utils/classes/CollectionImpl.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
class CollectionImpl {
|
||||||
|
title: string;
|
||||||
|
icon: any;
|
||||||
|
data: any;
|
||||||
|
|
||||||
|
constructor(title: string, icon: any) {
|
||||||
|
this.title = title;
|
||||||
|
this.icon = icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
// subject to change
|
||||||
|
setData(data: any){
|
||||||
|
this.data = data;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
54
compass/utils/constants.tsx
Normal file
54
compass/utils/constants.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { ListBulletIcon, HashtagIcon, Bars3BottomLeftIcon, EnvelopeIcon, AtSymbolIcon, ClipboardIcon, ArrowsUpDownIcon, ChevronDoubleRightIcon, ChevronDoubleLeftIcon, ChevronRightIcon, ChevronLeftIcon, EyeIcon, EyeSlashIcon, UserIcon, BookOpenIcon, MagnifyingGlassIcon, LinkIcon } from '@heroicons/react/24/solid';
|
||||||
|
|
||||||
|
export const Icons = {
|
||||||
|
EmailInputIcon: EnvelopeIcon,
|
||||||
|
HidePasswordIcon: EyeSlashIcon,
|
||||||
|
UnhidePasswordIcon: EyeIcon,
|
||||||
|
UserIcon: UserIcon,
|
||||||
|
ResourceIcon: BookOpenIcon,
|
||||||
|
SearchIcon: MagnifyingGlassIcon,
|
||||||
|
ServiceIcon: ClipboardIcon,
|
||||||
|
CloseRightArrow: ChevronDoubleRightIcon,
|
||||||
|
CloseLeftArrow: ChevronDoubleLeftIcon,
|
||||||
|
LinkRightArrow:ChevronRightIcon,
|
||||||
|
LinkLeftArrow:ChevronLeftIcon,
|
||||||
|
SortIcon: ArrowsUpDownIcon,
|
||||||
|
EmailTableIcon:AtSymbolIcon,
|
||||||
|
LinkTableIcon: LinkIcon,
|
||||||
|
TextTableIcon: Bars3BottomLeftIcon,
|
||||||
|
NumberTableIcon: HashtagIcon,
|
||||||
|
MultiselectTableIcon: ListBulletIcon
|
||||||
|
};
|
||||||
|
|
||||||
|
export enum User {
|
||||||
|
ADMIN,
|
||||||
|
EMPLOYEE,
|
||||||
|
VOLUNTEER
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum COLLECTION {
|
||||||
|
RESOURCE,
|
||||||
|
SERVICE,
|
||||||
|
USER
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum PROGRAM {
|
||||||
|
DOMESTIC_VIOLENCE,
|
||||||
|
ECONOMIC_STABILITY,
|
||||||
|
COMMUNITY_EDUCATION
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum DATATYPE {
|
||||||
|
INTEGER,
|
||||||
|
STRING,
|
||||||
|
LINK,
|
||||||
|
EMAIL,
|
||||||
|
MULTISELECT,
|
||||||
|
SELECT
|
||||||
|
}
|
||||||
|
|
||||||
|
export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
|
||||||
|
[COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
|
||||||
|
[COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
|
||||||
|
[COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
|
||||||
|
}
|
||||||
0
compass/utils/routes.tsx
Normal file
0
compass/utils/routes.tsx
Normal file
Loading…
Reference in New Issue
Block a user