diff --git a/apps/staking/.vscode/snippets.code-snippets b/apps/staking/.vscode/snippets.code-snippets new file mode 100644 index 00000000..276ff6ba --- /dev/null +++ b/apps/staking/.vscode/snippets.code-snippets @@ -0,0 +1,20 @@ +{ + // Place your session-website workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and + // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope + // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is + // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: + // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. + // Placeholders with the same ids are connected. + "cn Class Definition": { + "scope": "typescriptreact", + "prefix": ["cl", "class"], + "body": ["className={cn('$0')}"], + "description": "Define classes using cn package", + }, + "cn to existing Class Definition": { + "scope": "typescriptreact", + "prefix": ["cn"], + "body": ["cn($0'')"], + "description": "Define classes using cn package when className is already defined", + }, +} diff --git a/apps/staking/app/page.tsx b/apps/staking/app/page.tsx index aa52bfee..7e2fb455 100644 --- a/apps/staking/app/page.tsx +++ b/apps/staking/app/page.tsx @@ -1,5 +1,7 @@ +import { Footer } from '@/components/Footer'; import { URL } from '@/lib/constants'; import { ButtonDataTestId } from '@/testing/data-test-ids'; +import { cn } from '@session/ui/lib/utils'; import { Button } from '@session/ui/ui/button'; import { useTranslations } from 'next-intl'; import Image from 'next/image'; @@ -8,55 +10,78 @@ import Link from 'next/link'; export default function LandingPage() { const dictionary = useTranslations('home'); return ( -
-
-

- {dictionary.rich('title')} -

-
- - - - - - +
+
+
+

+ {dictionary.rich('title')} +

+
+ + + + + + + + + + + + +
-
- - - - - - +
+ {dictionary('heroImageAlt')}
-
- {dictionary('heroImageAlt')} -
+
); } diff --git a/apps/staking/components/Footer.tsx b/apps/staking/components/Footer.tsx new file mode 100644 index 00000000..a1eddec0 --- /dev/null +++ b/apps/staking/components/Footer.tsx @@ -0,0 +1,28 @@ +import { EXTERNAL_ROUTES, ROUTES, SOCIALS } from '@/lib/constants'; +import { Footer as FooterComp } from '@session/ui/components/Footer'; +import { cn } from '@session/ui/lib/utils'; + +import { useTranslations } from 'next-intl'; +export function Footer() { + const dictionary = useTranslations('navigation'); + + const menuItems = [...ROUTES, ...EXTERNAL_ROUTES].map( + ({ dictionaryKey, href, linkType = 'internal' }) => ({ + title: dictionary(dictionaryKey), + href: href, + linkType, + }) + ); + + const socialLinks = Object.values(SOCIALS); + + return ( + + ); +} diff --git a/apps/staking/components/Header.tsx b/apps/staking/components/Header.tsx index 07626e67..82a1e971 100644 --- a/apps/staking/components/Header.tsx +++ b/apps/staking/components/Header.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { LocaleKey } from '@/lib/locale-util'; +import { EXTERNAL_ROUTES, ROUTES } from '@/lib/constants'; import { ButtonDataTestId } from '@/testing/data-test-ids'; import { HamburgerIcon } from '@session/ui/icons/HamburgerIcon'; import { cn } from '@session/ui/lib/utils'; @@ -19,16 +19,6 @@ import { usePathname } from 'next/navigation'; import { WalletModalButtonWithLocales } from './WalletModalButtonWithLocales'; import { WalletNetworkDropdownWithLocales } from './WalletNetworkDropdownWithLocales'; -type LinkItem = { - href: string; - dictionaryKey: keyof Omit; -}; - -const links: LinkItem[] = [ - { dictionaryKey: 'stake', href: '/stake' }, - { dictionaryKey: 'myStakes', href: '/mystakes' }, -] as const; - type NavLinkProps = { href: string; pathname: string; @@ -55,20 +45,20 @@ export default function Header() { const dictionary = useTranslations('navigation'); const pathname = usePathname(); return ( -