diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 7bceac1..1eaeeb2 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -1,10 +1,10 @@ import { useMotionTemplate, useMotionValue } from 'framer-motion'; import { motion } from 'framer-motion'; -import { useTranslation } from 'next-i18next'; + +import clsxm from '@/lib/clsxm'; import { DynamicImage } from '@/components/framework/DynamicImage'; import { GridPattern } from '@/components/framework/GridPattern'; -import clsxm from '@/lib/clsxm'; import UnstyledLink from './framework/UnstyledLink'; @@ -81,8 +81,6 @@ const patterns = [ ]; const ImageCard = ({ name, src, count = 0, patternIndex, ...props }) => { - const { t } = useTranslation(['navbar']); - const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); @@ -100,8 +98,8 @@ const ImageCard = ({ name, src, count = 0, patternIndex, ...props }) => { return ( @@ -123,7 +121,7 @@ const ImageCard = ({ name, src, count = 0, patternIndex, ...props }) => { {count > 0 && ( - {count} {t(`Components`)} + {count} Components )} @@ -136,7 +134,7 @@ const ImageCard = ({ name, src, count = 0, patternIndex, ...props }) => { width={350} height={200} className={clsxm( - 'my-0 z-[1] relative', + 'relative z-[1] my-0', '[mask-image:url("/assets/dashboard/mask.svg")] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] [mask-mode:alpha]' )} /> @@ -166,60 +164,58 @@ const GridItems = ({ ); const Components = () => { - const { t } = useTranslation(['navbar']); const components = [ { - name: t(`Accordion`), + name: 'Accordion', src: 'accordion', }, { - name: t(`Button`), + name: 'Button', src: 'button', }, { - name: t(`Menu`), + name: 'Menu', src: 'menu', }, { - name: t(`Tab`), + name: 'Tab', src: 'tab', }, - // { - // name: t(`Toast`), - // src: 'toast', - // }, - // { - // name: t(`Dialog (Modal)`), - // src: 'dialog', - // }, + { + name: 'Toast', + src: 'toast', + }, + { + name: 'Dialog (Modal)', + src: 'dialog', + }, ]; return ; }; const Forms = () => { - const { t } = useTranslation(['navbar']); const components = [ { - name: t(`Validation`), + name: 'Validation', src: 'form-validation', href: 'form/validation', }, { - name: t(`Switch`), + name: 'Switch', src: 'form-switch', href: 'form/switch', }, { - name: t(`Input`), + name: 'Input', src: 'form-input', href: 'form/input', }, { - name: t(`Select`), + name: 'Select', src: 'form-select', href: 'form/select', }, { - name: t(`ComboBox`), + name: 'ComboBox', src: 'form-combobox', href: 'form/combobox', }, @@ -228,11 +224,17 @@ const Forms = () => { }; const UI = () => { - const { t } = useTranslation(['navbar']); const uis = [ { - name: t(`Card`), - src: 'card', + name: 'Card', + src: 'ui-card', + href: 'ui/card', + count: 3, + }, + { + name: 'List', + src: 'ui-card', + href: 'ui/list', count: 3, }, ]; @@ -240,15 +242,14 @@ const UI = () => { }; const Plugins = () => { - const { t } = useTranslation(['navbar']); const plugins = [ { - name: t(`Button`), + name: 'Button', src: 'plugin-button', href: 'plugin/button', }, /* { - name: t(`Tooltip`), + name: "Tooltip", src: 'plugin-tooltip', href: 'plugin/tooltip', }, */ diff --git a/src/components/Examples.tsx b/src/components/Examples.tsx index 2edc9a4..277ab06 100644 --- a/src/components/Examples.tsx +++ b/src/components/Examples.tsx @@ -1,5 +1,4 @@ import { ChevronRightIcon } from '@heroicons/react/24/solid'; -import { useTranslation } from 'next-i18next'; import { useRouter } from 'next/router'; import { useState } from 'react'; @@ -9,7 +8,6 @@ import { MenuExamples } from '@/components/menu'; import { TabExamples } from '@/components/tab'; import clsxm from '../lib/clsxm'; -import { ListDetailComponent } from './list'; const GridWrap = ({ title, href, children, router, ...props }) => { return ( @@ -28,42 +26,40 @@ const GridWrap = ({ title, href, children, router, ...props }) => { }; export const Examples = () => { - const { t } = useTranslation('common'); const router = useRouter(); - const title = t('Examples'); - const [notification, setNotification] = useState(undefined); + const [_, setNotification] = useState(undefined); const exampleComponents = [ { - title: t('Accordion'), + title: 'Accordion', href: '/accordion', Component: AccordionExamples.Simple, className: '!w-full md:!w-full', }, { - title: t('Menu'), + title: 'Menu', href: '/menu', Component: MenuExamples.Default, className: '!w-full', }, { - title: t('Tab'), + title: 'Tab', href: '/tab', Component: TabExamples.Default, className: '!w-full', }, { - title: t('Card'), + title: 'Card', href: '/card/#standard', Component: CardExamples.Standard, className: 'h-96', }, { - title: t('App Store.title', { ns: 'card' }), + title: 'App Store', href: '/card/#app-store', Component: CardExamples.AppleStore, }, /* { - title: t('List', { ns: 'list' }), + title: 'List', { ns: 'list' }, href: '/list/#detail', Component: ListDetailComponent, className: 'max-w-md shadow-xl h-full !rounded-3xl example', @@ -71,7 +67,7 @@ export const Examples = () => { ]; return ( <> -
+
{exampleComponents.map(({ className, Component, ...props }) => ( { - const { t } = useTranslation(['index', 'common']); const shouldReduceMotion = useReducedMotion(); const animationContainerRef = useRef(null); const [activeTabIndex, setActiveTabIndex] = useState(0); @@ -34,23 +33,19 @@ export const FluidDesign = () => { const conceptOpacity = useTransform(scrollX, [20, 30], [0, 1]); const elegantDesignVideos = [ { - title: t(`fluid-design.accordionComponent.title`, { ns: 'index' }), - description: t(`fluid-design.accordionComponent.description`, { - ns: 'index', - }), + title: 'Fluid Design', + description: + 'Beautiful UI that are responsive, supports features like dark mode and a11y with elegant transitions.', acitveClassName: 'aspect-square', }, { - title: t(`fluid-design.inputComponent.title`, { ns: 'index' }), - description: t(`fluid-design.inputComponent.description`, { - ns: 'index', - }), + title: 'Input Component', + description: 'Clean input fields with validation and error states.', }, { - title: t(`fluid-design.menuComponent.title`, { ns: 'index' }), - description: t(`fluid-design.menuComponent.description`, { - ns: 'index', - }), + title: 'Menu Component', + description: + 'Menu component supports keyboard navigation and screen readers.', }, ]; const intergrateCompList = [ @@ -98,25 +93,24 @@ export const FluidDesign = () => { return ( <> -
+
-

- {t(`fluid-design.elegant.title`)} -

-

{t(`fluid-design.elegant.description`)}

+

Elegant Design

+

+ Many UI libraries and component designs often only focus on the + looks. While they cover the majority of users' needs. Fluid Design + aims to create components that works for all users, making extra + effort to make beautiful design accessible. +

{
-

{t(`fluid-design.a11y.title`)}

+

Built with a11y in mind.

- - ), - }} - /> + Utilizing libraries like{' '} + + headlessui + {' '} + to provide a11y features like focus management, keyboard + navigation, and screen reader support. Fluid Design also adds + support to high-contrast mode, reduce-motion, and light/dark mode.

{
-

- {t(`fluid-design.simple.title`)} -

-

{t(`fluid-design.simple.description`)}

+

Simple. But not simplistic.

+

+ In order to transform more websites into accessible websites, it + is key to make the component intergration process as simple as + possible. So anyone can adapt to it, even if they are not familiar + with a11y. With no extra effort, you can create a beautiful and + accessible website. +

@@ -194,9 +190,9 @@ export const FluidDesign = () => { tabClassName='w-full' > - {t(`fluid-design.tab.normal`)} - {t(`fluid-design.tab.high-contrast`)} - {t(`fluid-design.tab.rtl`)} + Normal + High Contrast + RTL @@ -233,7 +229,10 @@ export const FluidDesign = () => { -

{t(`fluid-design.buttonComponent.description`)}

+

+ The Button component is just one of the many components that are + built with a11y in mind. +

{/*
@@ -332,11 +331,11 @@ export const FluidDesign = () => {
-
-

+
+

It all starts with
a simple idea.

-

+

The web is a powerful medium for communication and data exchange. However, not every website is created equal for every user. Some websites are difficult to use, and some are inaccessible to users with @@ -419,7 +418,7 @@ export const FluidDesign = () => {

-

+

Linear

@@ -454,7 +453,7 @@ export const FluidDesign = () => {
-

+

Ease In Out

@@ -489,7 +488,7 @@ export const FluidDesign = () => {
-

+

Spring

@@ -643,7 +642,7 @@ export const FluidDesign = () => {
-

+

Aims to move the web
forward with a11y.

@@ -679,7 +678,7 @@ export const FluidDesign = () => {

+

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo @@ -25,7 +24,7 @@ const data = [ { title: 'Service', details: ( -

+

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non @@ -39,14 +38,14 @@ const data = [ title: 'About', details: ( <> -

+

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

-
    +
    • List item one
    • List item two
    • List item three
      • @@ -59,7 +58,6 @@ const data = [ ]; function AccordionSimpleWithIconComponent() { - const { t } = useTranslation('accordion'); const shouldReduceMotion = useReducedMotion(); const rowStyle = 'hover:bg-gray-200/30 focus-visible:bg-gray-200/30 dark:hover:bg-gray-600/30 dark:focus-visible:bg-gray-600/30 hover:contrast-more:bg-amber-300 dark:hover:contrast-more:bg-amber-400 text-gray-700 dark:text-gray-200 contrast-more:text-gray-900 dark:contrast-more:text-gray-50 dark:contrast-more:focus-visible:text-gray-900 dark:contrast-more:hover:text-gray-900 focus-within:outline-none focus-within:ring-1 focus-within:ring-gray-400 dark:focus-within:ring-gray-500 contrast-more:focus-within:ring-gray-900 dark:contrast-more:focus-within:ring-gray-200 focus-within:ring-inset transition-colors [-webkit-tap-highlight-color:transparent]'; @@ -67,7 +65,7 @@ function AccordionSimpleWithIconComponent() { const ListPanel = ({ children }) => ( ); return ( -
      +
      {data.map((item, index) => ( { const id = useId(); - const { t } = useTranslation('button'); const [present] = useToast(); return ( @@ -86,11 +84,11 @@ const ButtonColors = ({ className='capitalize' onClick={() => present({ - title: t(`colors.${color}`), + title: color, }) } > - {t(`colors.${color}`)} + {color} ))} @@ -99,7 +97,6 @@ const ButtonColors = ({ const ButtonWeights = () => { const id = useId(); - const { t } = useTranslation('button'); const weights = ['light', 'normal', 'bold', 'outline', 'clear', 'link']; const [present] = useToast(); return ( @@ -114,11 +111,11 @@ const ButtonWeights = () => { className='capitalize' onClick={() => present({ - title: t(`weights.${weight}`), + title: weight, }) } > - {t(`weights.${weight}`)} + {weight} ))} @@ -127,7 +124,6 @@ const ButtonWeights = () => { const ButtonSizes = () => { const id = useId(); - const { t } = useTranslation('button'); const sizes = ['xs', 'sm', 'md', 'lg', 'xl']; const [present] = useToast(); return ( @@ -142,11 +138,11 @@ const ButtonSizes = () => { className='capitalize' onClick={() => present({ - title: t(`sizes.${size}`), + title: size, }) } > - {t(`sizes.${size}`)} + {size} ))} @@ -214,7 +210,7 @@ const ButtonStates = () => { > Confirm -
      +
      null} initialValues={{ @@ -331,7 +327,7 @@ const IconWithText = () => {
      diff --git a/src/components/card/Standard.tsx b/src/components/card/Standard.tsx index 3431e0c..341b076 100644 --- a/src/components/card/Standard.tsx +++ b/src/components/card/Standard.tsx @@ -1,7 +1,6 @@ import { Button } from '@fluid-design/fluid-ui'; import { HeartIcon, ShareIcon } from '@heroicons/react/24/outline'; import clsx, { ClassValue } from 'clsx'; -import { useTranslation } from 'next-i18next'; import Image from 'next/image'; import { twMerge } from 'tailwind-merge'; @@ -11,7 +10,6 @@ function clsxm(...classes: ClassValue[]) { } export const CardStandardComponent = ({ src = undefined, ...props }) => { - const { t } = useTranslation('image'); const contrastRing = `contrast-more:border contrast-more:border-gray-800 dark:contrast-more:border-gray-200`; return (
      {
      diff --git a/src/components/card/components/CardStandardComponent.tsx b/src/components/card/components/CardStandardComponent.tsx index cc89461..741c829 100644 --- a/src/components/card/components/CardStandardComponent.tsx +++ b/src/components/card/components/CardStandardComponent.tsx @@ -1,18 +1,16 @@ import { HeartIcon, ShareIcon } from '@heroicons/react/24/outline'; -import { useTranslation } from 'next-i18next'; import Image from 'next/image'; function CardStandardComponent({ setNotification, src = undefined, ...props }) { - const { t } = useTranslation('image'); const contrastRing = `contrast-more:border contrast-more:border-gray-800 dark:contrast-more:border-gray-200`; return (
      -
      +
      Sunrise in the national park Gantrisch in Bern, Switzerland. By Alain from Unsplash.
      -
      +
      -

      - {t('Subtitle', { ns: 'common' })} +

      + Subtitle

      -

      - {t('Card Title', { ns: 'common' })} +

      + Card Title

      -

      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

      -
      - - -
      +