axone-protocol · vladsemcomputools · Apr 8, 2024 · Apr 8, 2024 · Apr 8, 2024
diff --git a/app/faq/page.tsx b/app/faq/page.tsx
@@ -0,0 +1,12 @@
+import Box from '@/components/ui/box';
+import PageContainer from '@/components/ui/page-container';
+
+export default function FAQ () {
+  return (
+    <PageContainer>
+      <Box >
+        <h1 className='text-center text-white mb-5 text-3xl'>FAQ Test page</h1>
+      </Box>
+    </PageContainer>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
@@ -2,32 +2,43 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+.sidebar-item-active {
+  position: relative;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+.sidebar-item-active:after,
+.sidebar-item-active:before {
+  content: '';
+  width: 240px;
+  height: 46px;
+  position: absolute;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+.sidebar-item-active:after {
+  border-top: 1px solid rgba(255, 255, 255, 0.06); /* inner border */
+  border-right: 1px solid rgba(255, 255, 255, 0.02);
+  box-shadow: 0 -14px 0 0 #071622; /* outer border */
+  border-radius: 0 1.25rem 0 0;
+  right: -1px;
+  top: 56px;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+.sidebar-item-active:before {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* inner border */
+  border-right: 1px solid rgba(255, 255, 255, 0.02);
+  box-shadow: 0 14px 0 0 #071622; /* outer border */
+  border-radius: 0 0 1.25rem 0;
+  right: -2px;
+  top: -47px;
 }
+
+/* Styles for active state of first item in sidebar (e.g Dashboard, removing outer rounding at the top */
+.sidebar-item-active.sidebar-item-active-first:before {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: none;
+  border-right: none;
+  box-shadow: none;
+  border-radius: 0;
+  right: -1px;
+  top: -1px;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,8 +1,13 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Courier_Prime } from 'next/font/google';
 import './globals.css';
+import Header from '@/components/ui/header';
+import Sidebar from '@/components/ui/sidebar';
 
-const inter = Inter({ subsets: ['latin'] });
+const font = Courier_Prime({
+  subsets: ['latin'],
+  weight: '400'
+});
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -16,7 +21,15 @@ export default function RootLayout ({
 }>) {
   return (
     <html lang='en'>
-      <body className={inter.className}>{children}</body>
+      <body className={`${font.className} bg-axone-bg-dark`}>
+        <main className='flex w-full h-screen'>
+          <Sidebar />
+          <div className='w-full h-screen overflow-y-auto'>
+            <Header />
+            {children}
+          </div>
+        </main>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,113 +1,125 @@
-import Image from 'next/image';
+'use client';
+import { Info } from 'lucide-react';
+import { useState } from 'react';
+import Text from '@/components/typography/text';
+import Title from '@/components/typography/title';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import Box from '@/components/ui/box';
+import { Button } from '@/components/ui/button';
+import { ButtonWithIcon } from '@/components/ui/button-with-icon';
+import Column from '@/components/ui/column';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import PageContainer from '@/components/ui/page-container';
+import Row from '@/components/ui/row';
+import CurrencySelect from '@/components/ui/select-currency';
+import LanguageSelect from '@/components/ui/select-language';
+import { Switch } from '@/components/ui/switch';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 export default function Home () {
+  const [checked, setChecked] = useState(false);
   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&nbsp;
-          <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>
+    <PageContainer>
+
+      {/* Box with Buttons */}
+      <Box>
+        <div className='w-full'>
+          <Row>
+            <Column>
+              <h1 className='text-center text-white mb-5 text-3xl'>Button</h1>
+              <Row className='justify-around'>
+                <Button>Default</Button>
+                <ButtonWithIcon variant={'noBorder'}>No Border</ButtonWithIcon>
+                <ButtonWithIcon variant={'link'} className='text-axone-orange'>Link</ButtonWithIcon>
+                <Button variant={'rounded'}>Rounded</Button>
+                <ButtonWithIcon>With icon</ButtonWithIcon>
+              </Row>
+            </Column>
+            <Column className='justify-center items-center'>
+              <h1 className='text-center text-white mb-5 text-3xl'>Tooltip</h1>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Info className='text-axone-orange' size={24} />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Add to library</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </Column>
+          </Row>
         </div>
-      </div>
+      </Box>
 
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm: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-full sm: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>
+      {/* Box with Selects */}
+      <Box>
+        <Row>
+          <Column>
+            <h1 className='text-center text-white mb-5 text-3xl'>Select</h1>
+            <Row className='justify-center'>
+              <LanguageSelect />
+              <CurrencySelect />
+            </Row>
+          </Column>
 
-      <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'>
-              -&gt;
-            </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>
+          <Column>
+            <h1 className='text-center text-white mb-5 text-3xl'>Switch</h1>
+            <Row className='justify-center'>
+              <Switch className='w-[68px] h-[32px]' checked={checked} onCheckedChange={() => {
+                setChecked(prev => !prev);
+              }} id='airplane-mode' />
+            </Row>
+          </Column>
+        </Row>
+      </Box>
 
-        <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'>
-              -&gt;
-            </span>
-          </h2>
-          <p className={'m-0 max-w-[30ch] text-sm opacity-50'}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
+      {/* Box */}
+      <Box>
+        <Title className='mb-[20px]'>This is Title component</Title>
+        <Text>This is general Text component</Text>
+        <Text>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam facere dicta, tenetur blanditiis dolorum, quo sapiente unde ut esse reprehenderit nisi maiores assumenda qui dignissimos non quidem omnis voluptates atque!</Text>
+        <ButtonWithIcon className='w-[160px] mt-6'>FAQ</ButtonWithIcon>
+      </Box>
 
-        <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'>
-              -&gt;
-            </span>
-          </h2>
-          <p className={'m-0 max-w-[30ch] text-sm opacity-50'}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
+      {/* Box With inputs */}
+      <Box>
+        <h1 className='text-center text-white mb-5 text-3xl'>Input</h1>
+        <div className='grid w-full max-w-sm items-center gap-1.5 m-[20px]'>
+          <Label className='text-white' htmlFor='email'>Label</Label>
+          <Input type='email' id='email' placeholder='Email' />
+        </div>
+        <div className='grid w-full max-w-sm items-center gap-1.5 m-[20px]'>
+          <Label className='text-white' htmlFor='email'>Label for required input</Label>
+          <Input isRequired={true} type='email' id='email' placeholder='Email' />
+        </div>
+      </Box>
 
-        <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'>
-              -&gt;
-            </span>
-          </h2>
-          <p className={'m-0 max-w-[30ch] text-sm opacity-50 text-balance'}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
+      {/* Box with Accordion */}
+      <Box>
+        <h1 className='text-center text-white mb-5 text-3xl'>Accordion</h1>
+        <Accordion type='single' collapsible className='m-[20px]'>
+          <AccordionItem value='item-1'>
+            <AccordionTrigger>Which wallets are supported for interacting with axone?</AccordionTrigger>
+            <AccordionContent>
+              <Text className='ml-[20px]'>You can currently connect with MetaMask, Ledger, Keplr, Trezor and Torus</Text>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value='item-2'>
+            <AccordionTrigger>Which wallets are supported for interacting with axone?</AccordionTrigger>
+            <AccordionContent>
+              <Text className='ml-[20px]'>You can currently connect with MetaMask, Ledger, Keplr, Trezor and Torus</Text>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value='item-3'>
+            <AccordionTrigger>Which wallets are supported for interacting with axone?</AccordionTrigger>
+            <AccordionContent>
+              <Text className='ml-[20px]'>You can currently connect with MetaMask, Ledger, Keplr, Trezor and Torus</Text>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </Box>
+    </PageContainer>
   );
 }
diff --git a/components.json b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/components/typography/text.tsx b/components/typography/text.tsx
@@ -0,0 +1,16 @@
+import { HTMLAttributes, memo, ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+type TextProps = {
+  children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+
+const Text = ({ children, className, ...props }: TextProps) => {
+  return (
+    <p className={cn('text-sm text-axone-grey leading-5 font-[400] mb-2.5', className)} {...props}>
+      {children}
+    </p>
+  );
+};
+
+export default memo<typeof Text>(Text);
diff --git a/components/typography/title.tsx b/components/typography/title.tsx
@@ -0,0 +1,17 @@
+import { HTMLAttributes, memo, ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+type TitleProps = {
+  children: ReactNode;
+  className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+const Title = ({ children, className, ...props }: TitleProps) => {
+  return (
+    <h1 className={cn('text-lg leading-7 font-bold', className)} {...props}>
+      {children}
+    </h1>
+  );
+};
+
+export default memo<typeof Title>(Title);