+
{`${article.views} ${t('views')}`}
- {article.content}
+ {article.content}
);
}
diff --git a/src/app/[locale]/(default)/storage/(main)/layout.tsx b/src/app/[locale]/(default)/storage/(main)/layout.tsx
deleted file mode 100644
index 4bddd7a..0000000
--- a/src/app/[locale]/(default)/storage/(main)/layout.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { CategorySelector } from '@/components/composites/CategorySelector';
-import { SearchBar } from '@/components/composites/SearchBar';
-import { SortSelector } from '@/components/composites/SortSelector';
-import { SelectorsSkeleton } from '@/components/storage/SelectorsSkeleton';
-import { ShoppingCartLink } from '@/components/storage/ShoppingCartLink';
-import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
-import { Suspense } from 'react';
-
-type StorageLayoutProps = {
- children: React.ReactNode;
- params: { locale: string };
-};
-
-export default function StorageLayout({
- children,
- params: { locale },
-}: StorageLayoutProps) {
- unstable_setRequestLocale(locale);
- const t = useTranslations('storage');
- const tUi = useTranslations('ui');
-
- // This does not make much sense with a backend, most likely the categories in the backend will have a name in both languages and an ID
- const categories = [
- {
- label: t('combobox.cables'),
- value: t('searchParams.cables'),
- },
- {
- label: t('combobox.sensors'),
- value: t('searchParams.sensors'),
- },
- {
- label: t('combobox.peripherals'),
- value: t('searchParams.peripherals'),
- },
- {
- label: t('combobox.miniPC'),
- value: t('searchParams.miniPC'),
- },
- ];
-
- const filters = [
- { name: t('select.popularity'), urlName: t('searchParams.popularity') },
- { name: t('select.sortDescending'), urlName: t('searchParams.descending') },
- { name: t('select.sortAscending'), urlName: t('searchParams.ascending') },
- { name: t('select.name'), urlName: t('searchParams.name') },
- ];
-
- return (
- <>
- ;
-}) {
- unstable_setRequestLocale(locale);
- const t = useTranslations('ui');
-
- const itemsPerPage = 12;
-
- const searchParamsCache = createSearchParamsCache({
- [t('page')]: parseAsInteger.withDefault(1),
- });
-
- const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams);
-
- return (
- <>
- ;
+}) {
+ unstable_setRequestLocale(locale);
+ const t = useTranslations('storage');
+ const t_ui = useTranslations('ui');
+
+ const itemsPerPage = 12;
+
+ const searchParamsCache = createSearchParamsCache({
+ [t_ui('page')]: parseAsInteger.withDefault(1),
+ });
+
+ const { [t_ui('page')]: page = 1 } = searchParamsCache.parse(searchParams);
+
+ // TODO: Implement filters and category selection
+ const categories = [
+ {
+ value: 'cables',
+ label: t('combobox.cables'),
+ },
+ {
+ value: 'sensors',
+ label: t('combobox.sensors'),
+ },
+ {
+ value: 'peripherals',
+ label: t('combobox.peripherals'),
+ },
+ {
+ value: 'miniPC',
+ label: t('combobox.miniPC'),
+ },
+ ];
+
+ const filters = [
+ 'select.popularity',
+ 'select.sortDescending',
+ 'select.sortAscending',
+ 'select.name',
+ ] as const;
+
+ return (
+ <>
+ &
- VariantProps;
-
-function ConfirmDialog({ confirmAction, t, ...props }: ConfirmDialogProps) {
- const [open, setOpen] = useState(false);
-
- return (
-
- );
-}
-
-export { ConfirmDialog };
diff --git a/src/components/composites/PaginationCarousel.tsx b/src/components/composites/PaginationCarousel.tsx
deleted file mode 100644
index 9ddd538..0000000
--- a/src/components/composites/PaginationCarousel.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { PaginationCarouselClient } from '@/components/composites/PaginationCarouselClient';
-import { useTranslations } from 'next-intl';
-
-function PaginationCarousel({
- ...props
-}: { className?: string; totalPages: number }) {
- const t = useTranslations('ui');
- return (
- ;
-
-const SearchBar = React.forwardRef(
- ({ className, ...props }, ref) => {
- return (
-
-
+
{children}
);
diff --git a/src/components/layout/header/DarkModeMenu.tsx b/src/components/settings/DarkModeMenu.tsx
similarity index 100%
rename from src/components/layout/header/DarkModeMenu.tsx
rename to src/components/settings/DarkModeMenu.tsx
diff --git a/src/components/layout/header/LocaleMenu.tsx b/src/components/settings/LocaleMenu.tsx
similarity index 100%
rename from src/components/layout/header/LocaleMenu.tsx
rename to src/components/settings/LocaleMenu.tsx
diff --git a/src/components/layout/header/ProfileMenu.tsx b/src/components/settings/ProfileMenu.tsx
similarity index 100%
rename from src/components/layout/header/ProfileMenu.tsx
rename to src/components/settings/ProfileMenu.tsx
diff --git a/src/components/storage/AddToCartButton.tsx b/src/components/storage/AddToCartButton.tsx
deleted file mode 100644
index c0009f7..0000000
--- a/src/components/storage/AddToCartButton.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/Button';
-import { Loader } from '@/components/ui/Loader';
-import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
-import { cx } from 'cva';
-
-// TODO: Type must be replaced by the type provided from database ORM.
-export type StorageItem = {
- id: number;
- name: string;
- photo_url: string;
- status: string;
- quantity: number;
- location: string;
-};
-
-export type CartItem = {
- id: number;
- amount: number;
-};
-
-type AddToCartButtonProps = {
- className?: string;
- item: StorageItem;
- t: {
- addToCart: string;
- removeFromCart: string;
- };
-};
-
-function AddToCartButton({ className, item, t }: AddToCartButtonProps) {
- const [cart, setCart, isLoading] = useLocalStorage(
- 'shopping-cart',
- [],
- );
-
- if (isLoading) {
- return ('shopping-cart');
-
- return (
- <>
-
-
- );
-}
-
-export { BorrowDialog };
diff --git a/src/components/storage/ItemCard.tsx b/src/components/storage/ItemCard.tsx
deleted file mode 100644
index ebd734c..0000000
--- a/src/components/storage/ItemCard.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { StorageItem } from '@/components/storage/AddToCartButton';
-import { AddToCartButton } from '@/components/storage/AddToCartButton';
-import {
- Card,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from '@/components/ui/Card';
-import { useTranslations } from 'next-intl';
-import Image from 'next/image';
-
-function ItemCard({
- item,
-}: {
- item: StorageItem;
-}) {
- const t = useTranslations('storage');
- const tUi = useTranslations('ui');
- return (
-
-
-
- {item.name}
-
- {item.location}
-
-
-
-
- );
-}
-
-export { ItemCard };
diff --git a/src/components/storage/ItemCardSkeleton.tsx b/src/components/storage/ItemCardSkeleton.tsx
deleted file mode 100644
index 242ffa8..0000000
--- a/src/components/storage/ItemCardSkeleton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
- Card,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from '@/components/ui/Card';
-import { Skeleton } from '@/components/ui/Skeleton';
-
-export function ItemCardSkeleton() {
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/components/storage/LoanForm.tsx b/src/components/storage/LoanForm.tsx
deleted file mode 100644
index 81b26ac..0000000
--- a/src/components/storage/LoanForm.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/Button';
-import { Calendar } from '@/components/ui/Calendar';
-import {
- Form,
- FormControl,
- FormDescription,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from '@/components/ui/Form';
-import { Input } from '@/components/ui/Input';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { addDays, addWeeks, endOfWeek } from 'date-fns';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const formSchema = z.object({
- phone: z.string().min(1),
- returnBy: z.date().min(new Date()),
-});
-
-type LoanFormProps = {
- t: {
- borrowNow: string;
- name: string;
- email: string;
- phoneNumber: string;
- phoneNumberDescription: string;
- returnBy: string;
- returnByDescription: string;
- submit: string;
- };
-};
-
-function LoanForm({ t }: LoanFormProps) {
- const form = useForm>({
- resolver: zodResolver(formSchema),
- defaultValues: {
- phone: '',
- returnBy: new Date(),
- },
- });
-
- function onSubmit(values: z.infer) {
- // TODO: Add new loan to database
- console.log(values);
- }
-
- return (
- <>
-
-
-
- );
-}
-
-export { LoanForm };
diff --git a/src/components/storage/SelectorsSkeleton.tsx b/src/components/storage/SelectorsSkeleton.tsx
deleted file mode 100644
index 8bf78b1..0000000
--- a/src/components/storage/SelectorsSkeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from '@/components/ui/Skeleton';
-import { useId } from 'react';
-
-function SelectorsSkeleton() {
- return (
- ('shopping-cart');
-
- return (
- setCart(null)}
- t={{
- title: t.clearCart,
- description: t.clearCartDescription,
- confirm: t.clear,
- cancel: t.cancel,
- }}
- >
-
- {t.clearCart}
-
- );
-}
-
-export { ShoppingCartClearDialog };
diff --git a/src/components/storage/ShoppingCartLink.tsx b/src/components/storage/ShoppingCartLink.tsx
deleted file mode 100644
index 6bd6efd..0000000
--- a/src/components/storage/ShoppingCartLink.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-import type { CartItem } from '@/components/storage/AddToCartButton';
-import { Badge } from '@/components/ui/Badge';
-import { Button } from '@/components/ui/Button';
-import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from '@/components/ui/Tooltip';
-import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
-import { Link } from '@/lib/locale/navigation';
-import { ShoppingCartIcon } from 'lucide-react';
-
-type ShoppingCartLinkProps = {
- t: {
- viewShoppingCart: string;
- };
-};
-
-function ShoppingCartLink({ t }: ShoppingCartLinkProps) {
- const [cart, _, isLoading] = useLocalStorage('shopping-cart');
-
- return (
-
-
-
-
-
-
-
-
- );
-}
-
-export { ShoppingCartLink };
diff --git a/src/components/storage/ShoppingCartTable.tsx b/src/components/storage/ShoppingCartTable.tsx
deleted file mode 100644
index 703105c..0000000
--- a/src/components/storage/ShoppingCartTable.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client';
-
-import type { CartItem } from '@/components/storage/AddToCartButton';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '@/components/ui/Table';
-import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
-import { XIcon } from 'lucide-react';
-
-// TODO: Must be replaced by requesting the data from a database.
-import { items } from '@/mock-data/items';
-import { ShoppingCartTableSkeleton } from './ShoppingCartTableSkeleton';
-
-type ShoppingCartTableProps = {
- t: {
- tableDescription: string;
- productId: string;
- productName: string;
- location: string;
- unitsAvailable: string;
- cartEmpty: string;
- amountOfItemARIA: string;
- };
-};
-
-function ShoppingCartTable({ t }: ShoppingCartTableProps) {
- const [cart, setCart, isLoading] = useLocalStorage(
- 'shopping-cart',
- [],
- );
-
- if (isLoading) {
- return
-
- );
-}
-
-export { ShoppingCartTable };
diff --git a/src/components/storage/ShoppingCartTableSkeleton.tsx b/src/components/storage/ShoppingCartTableSkeleton.tsx
deleted file mode 100644
index 62a3aef..0000000
--- a/src/components/storage/ShoppingCartTableSkeleton.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Skeleton } from '@/components/ui/Skeleton';
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '@/components/ui/Table';
-import { XIcon } from 'lucide-react';
-import { useId } from 'react';
-
-type ShoppingCartTableSkeletonProps = {
- t: {
- productId: string;
- productName: string;
- location: string;
- unitsAvailable: string;
- };
-};
-
-function ShoppingCartTableSkeleton({ t }: ShoppingCartTableSkeletonProps) {
- return (
-
-
- );
-}
-
-export { ShoppingCartTableSkeleton };
diff --git a/src/components/storage/SkeletonCard.tsx b/src/components/storage/SkeletonCard.tsx
new file mode 100644
index 0000000..8c3cafb
--- /dev/null
+++ b/src/components/storage/SkeletonCard.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from '@/components/ui/Skeleton';
+
+export function SkeletonCard() {
+ return (
+ ;
-
-function Calendar({
- className,
- classNames,
- showOutsideDays = true,
- locale,
- ...props
-}: CalendarProps) {
- return (
- ;
-
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes
@@ -32,22 +28,19 @@ const CardHeader = React.forwardRef<
));
CardHeader.displayName = 'CardHeader';
-const CardTitle = React.forwardRef(
- ({ level = 'h3', className, ...props }, ref) => {
- const Component = level;
-
- return (
-
+>(({ className, ...props }, ref) => (
+
+));
CardTitle.displayName = 'CardTitle';
const CardDescription = React.forwardRef<
diff --git a/src/components/ui/Combobox.tsx b/src/components/ui/Combobox.tsx
index d51c3b2..57a4b93 100644
--- a/src/components/ui/Combobox.tsx
+++ b/src/components/ui/Combobox.tsx
@@ -27,9 +27,6 @@ type ComboboxProps = {
defaultPlaceholder: string;
buttonClassName?: string;
contentClassName?: string;
- valueCallback?: (value: string | null) => void;
- initialValue?: string | null;
- ariaLabel?: string;
};
function Combobox({
@@ -38,12 +35,9 @@ function Combobox({
defaultPlaceholder,
buttonClassName,
contentClassName,
- valueCallback,
- initialValue,
- ariaLabel,
}: ComboboxProps) {
const [open, setOpen] = React.useState(false);
- const [value, setValue] = React.useState(initialValue ?? '');
+ const [value, setValue] = React.useState('');
return (
@@ -52,7 +46,6 @@ function Combobox({
variant='outline'
role='combobox'
aria-expanded={open}
- aria-label={ariaLabel}
className={cx('w-[200px] justify-between', buttonClassName)}
>
{value
@@ -72,14 +65,8 @@ function Combobox({
key={choice.value}
value={choice.value}
onSelect={(currentValue) => {
- // Set newValue to null if user selects the same value twice
- const newValue =
- currentValue === value ? null : currentValue;
- setValue(newValue);
+ setValue(currentValue === value ? '' : currentValue);
setOpen(false);
- if (valueCallback) {
- valueCallback(newValue);
- }
}}
>
void;
- disabled?: Matcher | Matcher[];
- buttonClassName?: string;
-};
-
-/**
- * This is a sligtly modified version of shadcn's Date Picker built on top of Calendar.
- * The component has a state, but also allows adding an additional date callback function which
- * provides a way to have side effects and/or state updates on the parent component whenever a new date is selected.
- */
-function DatePicker({
- initialDate,
- dateCallback,
- disabled,
- buttonClassName,
-}: DatePickerProps) {
- const [date, setDate] = React.useState(initialDate ?? new Date());
-
- function handleDateChange(date: Date | undefined) {
- if (!date) return;
- setDate(date);
- if (dateCallback) {
- dateCallback(date);
- }
- }
-
- return (
-
-
-
-
-
- handleDateChange(date)}
- disabled={disabled}
- />
-
-
- );
-}
-
-export { DatePicker };
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
deleted file mode 100644
index c945d9f..0000000
--- a/src/components/ui/Form.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-'use client';
-
-import type * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
-import {
- Controller,
- type ControllerProps,
- type FieldPath,
- type FieldValues,
- FormProvider,
- useFormContext,
-} from 'react-hook-form';
-
-import { Label } from '@/components/ui/Label';
-import { cx } from '@/lib/utils';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
- TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
-> = {
- name: TName;
-};
-
-const FormFieldContext = React.createContext(
- {} as FormFieldContextValue,
-);
-
-const FormField = <
- TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
->({
- ...props
-}: ControllerProps) => {
- return (
-
-
- );
-};
-
-const useFormField = () => {
- const fieldContext = React.useContext(FormFieldContext);
- const itemContext = React.useContext(FormItemContext);
- const { getFieldState, formState } = useFormContext();
-
- const fieldState = getFieldState(fieldContext.name, formState);
-
- if (!fieldContext) {
- throw new Error('useFormField should be used within ');
- }
-
- const { id } = itemContext;
-
- return {
- id,
- name: fieldContext.name,
- formItemId: `${id}-form-item`,
- formDescriptionId: `${id}-form-item-description`,
- formMessageId: `${id}-form-item-message`,
- ...fieldState,
- };
-};
-
-type FormItemContextValue = {
- id: string;
-};
-
-const FormItemContext = React.createContext(
- {} as FormItemContextValue,
-);
-
-const FormItem = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
- const id = React.useId();
-
- return (
-
-
-
- );
-});
-FormItem.displayName = 'FormItem';
-
-const FormLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => {
- const { error, formItemId } = useFormField();
-
- return (
-
- );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ ...props }, ref) => {
- const { error, formItemId, formDescriptionId, formMessageId } =
- useFormField();
-
- return (
-
->(({ className, ...props }, ref) => {
- const { formDescriptionId } = useFormField();
-
- return (
-
- );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, children, ...props }, ref) => {
- const { error, formMessageId } = useFormField();
- const body = error ? String(error?.message) : children;
-
- if (!body) {
- return null;
- }
-
- return (
- (
,
- React.ComponentPropsWithoutRef &
- VariantProps
->(({ className, ...props }, ref) => (
- & VariantProps) {
- return (
- ;
+
+/**
+ * This component creates a full search bar with an icon.
+ * The ref, if used, is passed onto the input element, not the wrapper for the component.
+ */
+const SearchBar = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
->(({ className, ...props }, ref) => (
-
->(({ className, ...props }, ref) => (
-
-));
-TableHeader.displayName = 'TableHeader';
-
-const TableBody = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-TableBody.displayName = 'TableBody';
-
-const TableFooter = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
- tr]:last:border-b-0',
- className,
- )}
- {...props}
- />
-));
-TableFooter.displayName = 'TableFooter';
-
-const TableRow = React.forwardRef<
- HTMLTableRowElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
->(({ className, ...props }, ref) => (
-
->(({ className, ...props }, ref) => (
-
->(({ className, ...props }, ref) => (
- (
- key: string,
- initialValue?: T | (() => T),
-): [T | undefined, (value: T | null | undefined) => void, boolean] {
- const [isLoading, setIsLoading] = useState(true);
- const [storedValue, setStoredValue] = useState(() => {
- let initValue: T | undefined;
- if (typeof initialValue === 'function') {
- initValue = (initialValue as () => T)();
- } else {
- initValue = initialValue;
- }
-
- if (typeof window === 'undefined') {
- return initValue;
- }
-
- const raw = localStorage.getItem(key);
- if (raw) {
- try {
- return JSON.parse(raw) as T;
- } catch {
- return initValue;
- }
- } else {
- return initValue;
- }
- });
-
- const setValue = useCallback(
- (value: T | null | undefined) => {
- if (typeof window === 'undefined') {
- return;
- }
- const newValue = value instanceof Function ? value(storedValue) : value;
- if (!newValue || (Array.isArray(newValue) && newValue.length === 0)) {
- localStorage.removeItem(key);
- let defaultValue: T | undefined;
- if (typeof initialValue === 'function') {
- defaultValue = (initialValue as () => T)();
- } else {
- defaultValue = initialValue;
- }
- setStoredValue(defaultValue);
- } else {
- localStorage.setItem(key, JSON.stringify(newValue));
- setStoredValue(newValue);
- }
- window.dispatchEvent(new StorageEvent('local-storage', { key }));
- },
- [key, storedValue, initialValue],
- );
-
- useEffect(() => {
- const handleStorageChange = (event: StorageEvent | CustomEvent) => {
- if ((event as StorageEvent).key && (event as StorageEvent).key !== key) {
- return;
- }
- const raw = localStorage.getItem(key);
- if (raw) {
- try {
- setStoredValue(JSON.parse(raw) as T);
- } catch {
- let defaultValue: T | undefined;
- if (typeof initialValue === 'function') {
- defaultValue = (initialValue as () => T)();
- } else {
- defaultValue = initialValue;
- }
- setStoredValue(defaultValue);
- }
- } else {
- let defaultValue: T | undefined;
- if (typeof initialValue === 'function') {
- defaultValue = (initialValue as () => T)();
- } else {
- defaultValue = initialValue;
- }
- setStoredValue(defaultValue);
- }
- };
-
- window.addEventListener('storage', handleStorageChange);
- window.addEventListener('local-storage', handleStorageChange);
- setIsLoading(false);
- return () => {
- window.removeEventListener('storage', handleStorageChange);
- window.removeEventListener('local-storage', handleStorageChange);
- };
- }, [key, initialValue]);
-
- return [storedValue, setValue, isLoading];
-}
-
-export { useLocalStorage };
diff --git a/src/lib/locale/request.ts b/src/lib/locale/i18n.ts
similarity index 81%
rename from src/lib/locale/request.ts
rename to src/lib/locale/i18n.ts
index 5a5fb6e..5754d72 100644
--- a/src/lib/locale/request.ts
+++ b/src/lib/locale/i18n.ts
@@ -3,7 +3,8 @@ import { getRequestConfig } from 'next-intl/server';
import { notFound } from 'next/navigation';
export default getRequestConfig(async ({ locale }) => {
- if (!routing.locales.includes(locale as 'en')) notFound();
+ // @ts-ignore
+ if (!routing.locales.includes(locale)) notFound();
return {
messages: (await import(`../../../messages/${locale}.json`))
.default as Messages,
diff --git a/src/lib/locale/index.ts b/src/lib/locale/index.ts
index 8ffd34e..20bda14 100644
--- a/src/lib/locale/index.ts
+++ b/src/lib/locale/index.ts
@@ -29,13 +29,5 @@ export const routing = defineRouting({
en: '/about',
no: '/om-oss',
},
- '/storage': {
- en: '/storage',
- no: '/lager',
- },
- '/storage/shopping-cart': {
- en: '/storage/shopping-cart',
- no: '/lager/handlekurv',
- },
},
});
diff --git a/src/mock-data/items.ts b/src/mock-data/items.ts
index 3e26d06..ce106f9 100644
--- a/src/mock-data/items.ts
+++ b/src/mock-data/items.ts
@@ -1,6 +1,5 @@
const items = [
{
- id: 34872,
name: 'Laptop',
photo_url: 'https://example.com/photos/laptop.jpg',
status: 'Operational',
@@ -8,7 +7,6 @@ const items = [
location: 'Storage Room A',
},
{
- id: 58392,
name: 'Desktop PC',
photo_url: 'https://example.com/photos/desktop_pc.jpg',
status: 'Operational',
@@ -16,7 +14,6 @@ const items = [
location: 'Workstation Area 1',
},
{
- id: 72541,
name: 'Monitor',
photo_url: 'https://example.com/photos/monitor.jpg',
status: 'Operational',
@@ -24,7 +21,6 @@ const items = [
location: 'Storage Room B',
},
{
- id: 91834,
name: 'Keyboard',
photo_url: 'https://example.com/photos/keyboard.jpg',
status: 'Operational',
@@ -32,7 +28,6 @@ const items = [
location: 'Storage Room A',
},
{
- id: 12095,
name: 'Mouse',
photo_url: 'https://example.com/photos/mouse.jpg',
status: 'Operational',
@@ -40,7 +35,6 @@ const items = [
location: 'Storage Room A',
},
{
- id: 65738,
name: 'Router',
photo_url: 'https://example.com/photos/router.jpg',
status: 'Operational',
@@ -48,7 +42,6 @@ const items = [
location: 'Networking Room',
},
{
- id: 23984,
name: 'Ethernet Cable',
photo_url: 'https://example.com/photos/ethernet_cable.jpg',
status: 'Operational',
@@ -56,7 +49,6 @@ const items = [
location: 'Networking Room',
},
{
- id: 48152,
name: 'External Hard Drive',
photo_url: 'https://example.com/photos/external_hard_drive.jpg',
status: 'Operational',
@@ -64,7 +56,6 @@ const items = [
location: 'Storage Room B',
},
{
- id: 36829,
name: 'USB Flash Drive',
photo_url: 'https://example.com/photos/usb_flash_drive.jpg',
status: 'Operational',
@@ -72,7 +63,6 @@ const items = [
location: 'Storage Room B',
},
{
- id: 50273,
name: 'Power Supply Unit (PSU)',
photo_url: 'https://example.com/photos/psu.jpg',
status: 'Operational',
@@ -80,7 +70,6 @@ const items = [
location: 'Storage Room C',
},
{
- id: 17492,
name: 'Graphics Card',
photo_url: 'https://example.com/photos/graphics_card.jpg',
status: 'Operational',
@@ -88,7 +77,6 @@ const items = [
location: 'Storage Room C',
},
{
- id: 78356,
name: 'RAM Module',
photo_url: 'https://example.com/photos/ram_module.jpg',
status: 'Operational',
@@ -96,7 +84,6 @@ const items = [
location: 'Storage Room C',
},
{
- id: 92031,
name: 'Motherboard',
photo_url: 'https://example.com/photos/motherboard.jpg',
status: 'Operational',
@@ -104,7 +91,6 @@ const items = [
location: 'Storage Room C',
},
{
- id: 38627,
name: 'CPU',
photo_url: 'https://example.com/photos/cpu.jpg',
status: 'Operational',
@@ -112,7 +98,6 @@ const items = [
location: 'Storage Room C',
},
{
- id: 49082,
name: 'SSD',
photo_url: 'https://example.com/photos/ssd.jpg',
status: 'Operational',
@@ -120,7 +105,6 @@ const items = [
location: 'Storage Room C',
},
{
- id: 85731,
name: 'Network Switch',
photo_url: 'https://example.com/photos/network_switch.jpg',
status: 'Operational',
@@ -128,7 +112,6 @@ const items = [
location: 'Networking Room',
},
{
- id: 37429,
name: 'Soldering Iron',
photo_url: 'https://example.com/photos/soldering_iron.jpg',
status: 'Operational',
@@ -136,7 +119,6 @@ const items = [
location: 'Repair Station',
},
{
- id: 90321,
name: 'Multimeter',
photo_url: 'https://example.com/photos/multimeter.jpg',
status: 'Operational',
@@ -144,7 +126,6 @@ const items = [
location: 'Repair Station',
},
{
- id: 65704,
name: 'Screwdriver Set',
photo_url: 'https://example.com/photos/screwdriver_set.jpg',
status: 'Operational',
@@ -152,7 +133,6 @@ const items = [
location: 'Toolbox 1',
},
{
- id: 48139,
name: 'Anti-static Wrist Strap',
photo_url: 'https://example.com/photos/anti_static_wrist_strap.jpg',
status: 'Operational',
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6480b71..73a4ee5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,6 @@ import tailwindFluid, { extract, screens, fontSize } from 'fluid-tailwind';
import tailwindScrollbar from 'tailwind-scrollbar';
import type { Config } from 'tailwindcss';
import tailwindAnimate from 'tailwindcss-animate';
-import tailwindRadix from 'tailwindcss-radix';
import { fontFamily } from 'tailwindcss/defaultTheme';
const config = {
@@ -79,9 +78,6 @@ const config = {
},
},
plugins: [
- tailwindRadix({
- variantPrefix: false,
- }),
tailwindFluid,
tailwindAnimate,
tailwindScrollbar({ nocompatible: true }),
diff --git a/tsconfig.json b/tsconfig.json
index 9c1115c..6cb01c3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,10 +31,10 @@
},
"include": [
".eslintrc.js",
- "postcss.config.js",
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
+ "**/*.cjs",
"**/*.js",
".next/types/**/*.ts"
],
-
- {t('title')}
-
-
- {children}
-
- );
-}
diff --git a/src/app/[locale]/(default)/storage/(main)/loading.tsx b/src/app/[locale]/(default)/storage/(main)/loading.tsx
deleted file mode 100644
index c510d4f..0000000
--- a/src/app/[locale]/(default)/storage/(main)/loading.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PaginationCarouselSkeleton } from '@/components/composites/PaginationCarouselSkeleton';
-import { ItemCardSkeleton } from '@/components/storage/ItemCardSkeleton';
-import { useId } from 'react';
-
-export default function StorageSkeleton() {
- return (
- <>
-
- {Array.from({ length: 8 }).map(() => (
-
-
- {items
- .slice((page - 1) * itemsPerPage, page * itemsPerPage)
- .map((item) => (
-
-
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+}
diff --git a/src/app/[locale]/(default)/storage/loading.tsx b/src/app/[locale]/(default)/storage/loading.tsx
new file mode 100644
index 0000000..f88b271
--- /dev/null
+++ b/src/app/[locale]/(default)/storage/loading.tsx
@@ -0,0 +1,24 @@
+import { SkeletonCard } from '@/components/storage/SkeletonCard';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+export default function StorageSkeleton() {
+ return (
+ <>
+ {t('title')}
+{t('tooltips.viewShoppingCart')}
+
+
+
+
+
+ );
+}
diff --git a/src/app/[locale]/(default)/storage/new/page.tsx b/src/app/[locale]/(default)/storage/new/page.tsx
deleted file mode 100644
index 6ec7220..0000000
--- a/src/app/[locale]/(default)/storage/new/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function NewItemPage() {
- return New item page
; -} diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx new file mode 100644 index 0000000..223f604 --- /dev/null +++ b/src/app/[locale]/(default)/storage/page.tsx @@ -0,0 +1,156 @@ +import { PaginationCarousel } from '@/components/layout/PaginationCarousel'; +import { Button } from '@/components/ui/Button'; +import { + Card, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/ui/Card'; +import { Combobox } from '@/components/ui/Combobox'; +import { SearchBar } from '@/components/ui/SearchBar'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/Select'; +import { items } from '@/mock-data/items'; +import { useTranslations } from 'next-intl'; +import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'; +import Image from 'next/image'; +import { createSearchParamsCache, parseAsInteger } from 'nuqs/server'; + +export async function generateMetadata({ + params: { locale }, +}: { + params: { locale: string }; +}) { + const t = await getTranslations({ locale, namespace: 'layout' }); + + return { + title: t('storage'), + }; +} + +export default function StoragePage({ + params: { locale }, + searchParams, +}: { + params: { locale: string }; + searchParams: Record
+
+
+ {items
+ .slice((page - 1) * itemsPerPage, page * itemsPerPage)
+ .map((item) => (
+
+
+ {item.name}
+
+ {item.location}
+
+
+
+
+ {t('card.quantityInfo', { quantity: item.quantity })}
+
+
+
+
+ ))}
+
+
+
+
-
- {children}
-
- );
-}
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx b/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx
deleted file mode 100644
index 27310cd..0000000
--- a/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ShoppingCartTableSkeleton } from '@/components/storage/ShoppingCartTableSkeleton';
-import { Skeleton } from '@/components/ui/Skeleton';
-import { useTranslations } from 'next-intl';
-
-export default function ShoppingCartSkeleton() {
- const t = useTranslations('storage.shoppingCart');
- const tableMessages = {
- productId: t('productId'),
- productName: t('productName'),
- location: t('location'),
- unitsAvailable: t('unitsAvailable'),
- };
-
- return (
- <>
- - {t('title')} -
- -
-
-
- );
-}
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
deleted file mode 100644
index f72474e..0000000
--- a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { BorrowDialog } from '@/components/storage/BorrowDialog';
-import { ShoppingCartClearDialog } from '@/components/storage/ShoppingCartClearDialog';
-import { ShoppingCartTable } from '@/components/storage/ShoppingCartTable';
-import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
-
-export default function StorageShoppingCartPage({
- params: { locale },
-}: {
- params: { locale: string };
-}) {
- unstable_setRequestLocale(locale);
- const t = useTranslations('storage.shoppingCart');
- const tLoanForm = useTranslations('storage.loanForm');
-
- const tableMessages = {
- tableDescription: t('tableDescription'),
- productId: t('productId'),
- productName: t('productName'),
- location: t('location'),
- unitsAvailable: t('unitsAvailable'),
- cartEmpty: t('cartEmpty'),
- amountOfItemARIA: t('amountOfItemARIA'),
- };
-
- const borrowNowMessages = {
- borrowNow: t('borrowNow'),
- name: tLoanForm('name'),
- email: tLoanForm('email'),
- phoneNumber: tLoanForm('phoneNumber'),
- phoneNumberDescription: tLoanForm('phoneNumberDescription'),
- returnBy: tLoanForm('returnBy'),
- returnByDescription: tLoanForm('returnByDescription'),
- submit: tLoanForm('submit'),
- };
-
- return (
- <>
-
-
-
- );
-}
diff --git a/src/app/[locale]/error.tsx b/src/app/[locale]/error.tsx
deleted file mode 100644
index a839b0a..0000000
--- a/src/app/[locale]/error.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/Button';
-import { Link } from '@/lib/locale/navigation';
-import { AlertTriangleIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect } from 'react';
-
-export default function ErrorPage({
- error,
- reset,
-}: {
- error: Error;
- reset: () => void;
-}) {
- const t = useTranslations('error');
- useEffect(() => {
- console.error(error);
- }, [error]);
- return (
-
-
- );
-}
diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
deleted file mode 100644
index e97706f..0000000
--- a/src/app/[locale]/not-found.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '@/components/ui/Button';
-import { Link } from '@/lib/locale/navigation';
-import { HardDriveIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-
-export default function NotFoundPage() {
- const t = useTranslations('error');
- return (
- - {t('error')} -
-- {t('errorDescription')} -
- {error.message && ( -- Error: {error.message} -
- )} -
-
-
-
-
-
- );
-}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 17d77be..3f80952 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,14 +1,9 @@
'use client';
import { routing } from '@/lib/locale';
-import NextError from 'next/error';
+import { redirect, usePathname } from 'next/navigation';
-export default function NotFoundPage() {
- return (
-
-
- - {t('notFound')} -
-- {t('notFoundDescription')} -
- -
-
- );
- },
-);
-SearchBar.displayName = 'SearchBar';
-
-export { SearchBar };
diff --git a/src/components/composites/SortSelector.tsx b/src/components/composites/SortSelector.tsx
deleted file mode 100644
index 2adc1db..0000000
--- a/src/components/composites/SortSelector.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from '@/components/ui/Select';
-import { parseAsString, useQueryState } from 'nuqs';
-
-type SortSelectorProps = {
- filters: {
- name: string;
- urlName: string;
- }[];
- t: {
- sort: string;
- defaultValue: string;
- defaultSorting: string;
- ariaLabel: string;
- };
-};
-
-function SortSelector({ filters, t }: SortSelectorProps) {
- const [filter, setFilter] = useQueryState(
- t.sort,
- parseAsString
- .withDefault(t.defaultSorting)
- .withOptions({ shallow: false, clearOnDefault: true }),
- );
-
- return (
-
- );
-}
-export { SortSelector };
diff --git a/src/components/home/HelloWorld.tsx b/src/components/home/HelloWorld.tsx
index 3506c1e..4be51a8 100644
--- a/src/components/home/HelloWorld.tsx
+++ b/src/components/home/HelloWorld.tsx
@@ -1,5 +1,4 @@
'use client';
-
import { api } from '@/lib/api/client';
function HelloWorld() {
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index cc7f462..0c83b28 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -6,7 +6,7 @@ import {
} from '@/components/assets/icons';
import { IDILogo, NexusLogo } from '@/components/assets/sponsors';
import { LogoLink } from '@/components/layout/LogoLink';
-import { Nav } from '@/components/layout/header/Nav';
+import { Nav } from '@/components/layout/Nav';
import { Button } from '@/components/ui/Button';
import { Link } from '@/lib/locale/navigation';
import { BugIcon, MailIcon } from 'lucide-react';
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 85faf28..ebae02f 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,28 +1,26 @@
import { LogoLink } from '@/components/layout/LogoLink';
-import { DarkModeMenu } from '@/components/layout/header/DarkModeMenu';
-import { LocaleMenu } from '@/components/layout/header/LocaleMenu';
-import { MobileSheet } from '@/components/layout/header/MobileSheet';
-import { Nav } from '@/components/layout/header/Nav';
-import { ProfileMenu } from '@/components/layout/header/ProfileMenu';
+import { MobileSheet } from '@/components/layout/MobileSheet';
+import { Nav } from '@/components/layout/Nav';
+import { DarkModeMenu } from '@/components/settings/DarkModeMenu';
+import { LocaleMenu } from '@/components/settings/LocaleMenu';
+import { ProfileMenu } from '@/components/settings/ProfileMenu';
import { useTranslations } from 'next-intl';
function Header() {
const t = useTranslations('layout');
return (
-
+
- {Array.from({ length: 6 }).map(() => (
-
);
diff --git a/src/components/providers/IntlErrorProvider.tsx b/src/components/providers/IntlErrorProvider.tsx
index 197c9c3..afead1f 100644
--- a/src/components/providers/IntlErrorProvider.tsx
+++ b/src/components/providers/IntlErrorProvider.tsx
@@ -6,9 +6,12 @@ type Props = {
};
function IntlErrorProvider({ children, locale }: Props) {
- const { error } = useMessages();
+ const messages = useMessages();
return (
-
-
- - {t('card.quantityInfo', { quantity: item.quantity })} -
-
-
-
-
- );
-}
-
-export { SelectorsSkeleton };
diff --git a/src/components/storage/ShoppingCartClearDialog.tsx b/src/components/storage/ShoppingCartClearDialog.tsx
deleted file mode 100644
index cd6721b..0000000
--- a/src/components/storage/ShoppingCartClearDialog.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import { ConfirmDialog } from '@/components/composites/ConfirmDialog';
-import type { CartItem } from '@/components/storage/AddToCartButton';
-import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
-import { cx } from '@/lib/utils';
-import { XIcon } from 'lucide-react';
-
-type ShoppingCartClearDialogProps = {
- className?: string;
- t: {
- clearCart: string;
- clearCartDescription: string;
- clear: string;
- cancel: string;
- };
-};
-
-function ShoppingCartClearDialog({
- className,
- t,
-}: ShoppingCartClearDialogProps) {
- const [cart, setCart, isLoading] =
- useLocalStorage
-
- {!isLoading && cart && cart.length > 0 && (
-
- {cart.length}
-
- )}
-
- {t.viewShoppingCart}
-{t.cartEmpty}
; - } - - const itemsInCart = items.filter((item) => - cart.some((cartItem) => cartItem.id === item.id), - ); - - function updateAmountInCart(id: number, newValue: number) { - if (!cart) return; - - const newCart = cart.map((cartItem) => - cartItem.id === id ? { ...cartItem, amount: newValue } : cartItem, - ); - setCart(newCart); - } - - function removeItem(id: number) { - if (!cart) return; - - const newCart = cart.filter((cartItem: CartItem) => cartItem.id !== id); - setCart(newCart); - } - - return ( -
+
+ );
+}
diff --git a/src/components/ui/Calendar.tsx b/src/components/ui/Calendar.tsx
deleted file mode 100644
index 905dbbc..0000000
--- a/src/components/ui/Calendar.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import type * as React from 'react';
-import { DayPicker } from 'react-day-picker';
-
-import { buttonVariants } from '@/components/ui/Button';
-import { cx } from '@/lib/utils';
-
-export type CalendarProps = React.ComponentProps
+
+
+
+ - {body} -
- ); -}); -FormMessage.displayName = 'FormMessage'; - -export { - useFormField, - Form, - FormItem, - FormLabel, - FormControl, - FormDescription, - FormMessage, - FormField, -}; diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx index 18d6b46..a16957e 100644 --- a/src/components/ui/Input.tsx +++ b/src/components/ui/Input.tsx @@ -10,7 +10,7 @@ const Input = React.forwardRef
+
+ );
+ },
+);
+SearchBar.displayName = 'SearchBar';
+
+export { SearchBar };
diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx
deleted file mode 100644
index 4d00f59..0000000
--- a/src/components/ui/Table.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-
-import { cx } from '@/lib/utils';
-
-const Table = React.forwardRef<
- HTMLTableElement,
- React.HTMLAttributes
-
-
-));
-Table.displayName = 'Table';
-
-const TableHeader = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes