Skip to content

Commit

Permalink
in work
Browse files Browse the repository at this point in the history
  • Loading branch information
meta-panic committed Jan 6, 2025
1 parent 95c9fc1 commit 30fa756
Show file tree
Hide file tree
Showing 24 changed files with 725 additions and 61 deletions.
15 changes: 15 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,19 @@
"lint": "next lint"
},
"dependencies": {
"@next/font": "^14.2.15",
"classnames": "^2.5.1",
"next": "15.1.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.1.3"
"react-dom": "^19.0.0"
},
"devDependencies": {
"typescript": "^5",
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.1.3",
"@eslint/eslintrc": "^3"
"typescript": "^5"
}
}
}
Binary file added frontend/public/fonts/BebasNeue-Regular.ttf
Binary file not shown.
Binary file not shown.
Binary file added frontend/public/fonts/Raleway-regular.ttf
Binary file not shown.
Binary file added frontend/public/fonts/Raleway-semi-bold.ttf
Binary file not shown.
13 changes: 13 additions & 0 deletions frontend/src/app/components/counter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
"use client";

import { useState } from "react";

export const Counter = () => {

const [count, setCount] = useState(0);

console.log('Counter component - ');
return (
<button onClick={() => setCount(count + 1)}>Count: {count}</button>
)
}
Empty file.
35 changes: 35 additions & 0 deletions frontend/src/app/components/navigation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export const Navigation = () => {
const pathname = usePathname();
return (
<nav className="flex justify-center items-center p-4">
<Link
href="/"
className={pathname === "/" ? "font-bold mr-4" : "text-blue-500 mr-4"}
>
Home
</Link>
<Link
href="/about"
className={
pathname === "/about" ? "font-bold mr-4" : "text-blue-500 mr-4"
}
>
About
</Link>
<Link
href="/products/1"
className={
pathname.startsWith("/products/1")
? "font-bold mr-4"
: "text-blue-500 mr-4"
}
>
Product 1
</Link>
</nav>
);
};
15 changes: 15 additions & 0 deletions frontend/src/app/components/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
"use client";

import { useState } from "react";

export const D = () => {

const [count, setCount] = useState(0);

console.log('Counter component - ');
return (
<button onClick={() => setCount(count + 1)}> Count: {count} </button>
)
}

export default D;
42 changes: 0 additions & 42 deletions frontend/src/app/globals.css

This file was deleted.

43 changes: 30 additions & 13 deletions frontend/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,35 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import localFont from 'next/font/local'

const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
const bebas = localFont({
weight: '500',
variable: '--font-bebas-regular',
src: '../../public/fonts/BebasNeue-Regular.ttf',
display: 'swap',
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
const ralewayRegular = localFont({
weight: '500',
variable: '--font-raleway-regular',
src: '../../public/fonts/Raleway-Regular.ttf',
display: 'swap',
});
const ralewayItalic = localFont({
weight: '500',
variable: '--font-raleway-italic',
src: '../../public/fonts/Raleway-Italic-VariableFont_wght.ttf',
display: 'swap',
});
const ralewaySemiBold = localFont({
weight: '500',
variable: '--font-raleway-semobold',
src: '../../public/fonts/Raleway-semi-bold.ttf',
display: 'swap',
});


export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Дом молитвы",
description: "Церковь Евангельских христиан-баптистов",
};

export default function RootLayout({
Expand All @@ -23,9 +38,11 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<html lang="ru">
<body className={`${bebas.variable} ${ralewayRegular.variable} ${ralewayItalic.variable} ${ralewaySemiBold.variable}`}>
<header>header</header>
{children}
<footer>footer</footer>
</body>
</html>
);
Expand Down
26 changes: 25 additions & 1 deletion frontend/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
"use client"
import Image from "next/image";

import "../styles/reset.css";
import "../styles/colours.css";
import "../styles/semantic.css";
import "../styles/sizes.css";
import "../styles/globals.css";

import Typography from "@/components/atoms/typography/Typography";
import Link from "@/components/atoms/link/Link";
import { BlockColorProvider } from "@/components/atoms/ColorBlock/ColorBlock";


export default function Home() {
return (
<div style={{
Expand All @@ -10,7 +22,19 @@ export default function Home() {
height: '100vh',
fontFamily: 'Arial, sans-serif',
backgroundColor: '#f4f4f4',
}}>
}}
>
<Typography tag="H1">Добро пожаловать в Дом молитвы</Typography>
<Typography tag="H2">Добро пожаловать в Дом молитвы</Typography>
<Typography tag="H3">Добро пожаловать в Дом молитвы</Typography>
<Typography tag="body">Церковь «Дом молитвы» - это <Typography tag="body" mini>христианская</Typography> протестантская церковь, миссия которой направлена на <Typography tag="body" bold>служение людям</Typography></Typography>
<Typography tag="quote">Некая цитата из Библии</Typography>
<Typography tag="header">ссылка ссылка ссылка в хедера</Typography>
<BlockColorProvider blockColor="dark"><Link to="/history">ссылка на темном</Link></BlockColorProvider>
<BlockColorProvider blockColor="light"><Link to="/history">ссылка на светлом</Link></BlockColorProvider>
<BlockColorProvider blockColor="light"><Link to="/history">ссылка на светлом дефолтном</Link></BlockColorProvider>

<Link href="https://www.google.com/search?q=google&oq=google+&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRg8Mg4IAhBFGCcYOxiABBiKBTIOCAMQRRgnGDsYgAQYigUyBggEEEUYOzIGCAUQRRhBMgYIBhBFGEEyBggHEEUYPNIBCDMzOTFqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8">ссылка внешняя</Link>
<Image
src="/church-logo.svg"
alt="Логотип церкви"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.dark-block {
--default-text: var(--common-light-100);
--default-components-link-fg: #f8f6f7;
--hover-text: var(--common-light-100);
--hover-components-link-fg: #f8f6f7;
--active-text-ondark: var(--common-light-100);
--active-components-link-fg: #f8f6f7;
}
26 changes: 26 additions & 0 deletions frontend/src/components/atoms/ColorBlock/ColorBlock.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React, { createContext, useContext, ReactNode, } from 'react';
import classNames from 'classnames';
import styles from './ColorBlock.module.css';

type BlockColor = 'light' | 'dark';

const BlockColorContext = createContext<BlockColor>('light');

interface BlockColorProviderProps {
children: ReactNode;
blockColor: BlockColor;
}

export const BlockColorProvider: React.FC<BlockColorProviderProps> = ({ children, blockColor }) => {
return (
<BlockColorContext.Provider
value={blockColor}
>
<div
className={classNames({ [styles["dark-block"]]: blockColor === 'dark' })}
>
{children}
</div>
</BlockColorContext.Provider>
);
};
35 changes: 35 additions & 0 deletions frontend/src/components/atoms/link/Link.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* default link styles[on light] */
.link {
color: var(--default-components-link-fg);
text-decoration: underline;
cursor: pointer;
font-family: var(--font-raleway-regular);
}


.link {
display: inline-block;
position: relative;
text-decoration: none;
transition: color 0.3s ease;
}

/* Effect one: Underline - Inside Out */
.link::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -1px;
left: 0;
opacity: 0.33;
background-color: var(--default-components-link-fg);
transition: width 0.3s ease, left 0.3s ease;
}

.link:hover::before {
width: 100%;
left: 0;
opacity: 1;
background-color: var(--default-components-link-fg);
}
49 changes: 49 additions & 0 deletions frontend/src/components/atoms/link/Link.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@

import React, { FC, PropsWithChildren } from 'react';
import NextLink from 'next/link';
import classNames from "classnames";

import styles from "./Link.module.css";

type LinkProps =
| {
to: string;
href?: never;
target?: string;
}
| {
to?: never;
href: string;
target?: string;
};

const Link: FC<PropsWithChildren<LinkProps> & { onDark?: true }> = ({
to,
href,
target,
children,
}) => {
const classes = classNames(
styles.link,
);

if (to) {
// Internal link using next/link
return (
<NextLink href={to} target={target || "_self"} className={classes}>
<span>{children}</span>
</NextLink>
);
}

if (href) {
// External link
return (
<a href={href} target={target || "_blank"} className={styles.link}>
<span>{children}</span>
</a>
);
}
};

export default Link;
Loading

0 comments on commit 30fa756

Please sign in to comment.