mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-10 06:10:17 -04:00
added globals.css, 3 essential components, one example code
This commit is contained in:
Meliora Ho
parent
e51215cbff
commit
c51d04d63e
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 +0,0 @@
|
||||||
import type { Metadata } from 'next'
|
|
||||||
import { Inter } from 'next/font/google'
|
|
||||||
import './globals.css'
|
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] })
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: 'Create Next App',
|
|
||||||
description: 'Generated by create next app',
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function RootLayout({
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<html lang="en">
|
|
||||||
<body className={inter.className}>{children}</body>
|
|
||||||
</html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
import Image from 'next/image'
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
|
||||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
|
||||||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
|
|
||||||
<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">
|
|
||||||
Get started by editing
|
|
||||||
<code className="font-mono font-bold">app/page.tsx</code>
|
|
||||||
</p>
|
|
||||||
<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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
22
compass/components/Button.tsx
Normal file
22
compass/components/Button.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
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"
|
||||||
|
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;
|
||||||
27
compass/components/Input.tsx
Normal file
27
compass/components/Input.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react';
|
||||||
|
|
||||||
|
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
|
||||||
|
icon?: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Input: FunctionComponent<InputProps> = ({ icon, ...rest }) => {
|
||||||
|
return (
|
||||||
|
<div className="mb-4 flex items-center" style={{ '--input-padding': icon ? '0' : 'var(--spacing-3)' }}>
|
||||||
|
{icon && <span className="p-2">{icon}</span>}
|
||||||
|
<input
|
||||||
|
className={`shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline ${icon ? 'pl-0' : ''}`}
|
||||||
|
style={{
|
||||||
|
'--shadow-default': 'var(--shadow-default)',
|
||||||
|
'--shadow-focus': 'var(--shadow-focus)',
|
||||||
|
'--border-radius': 'var(--border-radius)',
|
||||||
|
'--border-width': 'var(--border-width)',
|
||||||
|
'--font-color': 'var(--font-color)',
|
||||||
|
'paddingLeft': 'var(--input-padding)',
|
||||||
|
}}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Input;
|
||||||
|
|
@ -9,19 +9,19 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
8
compass/pages/_app.tsx
Normal file
8
compass/pages/_app.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import '../styles/globals.css';
|
||||||
|
import type { AppProps } from 'next/app';
|
||||||
|
|
||||||
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
return <Component {...pageProps} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MyApp;
|
||||||
41
compass/pages/index.tsx
Normal file
41
compass/pages/index.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
// pages/index.tsx
|
||||||
|
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import type { NextPage } from 'next';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import Input from '@/components/Input'
|
||||||
|
import InlineLink from '@/components/InlineLink';
|
||||||
|
|
||||||
|
const Home: NextPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-xs">
|
||||||
|
<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-gray-700 text-sm font-bold mb-2" for="username">
|
||||||
|
Username
|
||||||
|
</label>
|
||||||
|
<Input />
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-gray-700 text-sm font-bold mb-2" for="password">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<Input />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Button>
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
<InlineLink>
|
||||||
|
Forgot password?
|
||||||
|
</InlineLink>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<p className="text-center text-gray-500 text-xs">
|
||||||
|
©2024 Compass Center
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user