+ );
+}
+
+export { ArticleItemSkeleton };
diff --git a/src/components/news/CardGrid.tsx b/src/components/news/CardGrid.tsx
new file mode 100644
index 0000000..4541930
--- /dev/null
+++ b/src/components/news/CardGrid.tsx
@@ -0,0 +1,37 @@
+import { cx } from '@/lib/utils';
+
+import { ArticleCard } from '@/components/news/ArticleCard';
+
+type CardGridProps = {
+ topArticles: {
+ id: number;
+ internal: boolean;
+ title: string;
+ date: string;
+ photoUrl: string;
+ }[];
+};
+
+function CardGrid({ topArticles }: CardGridProps) {
+ return (
+
+ {topArticles.map((data, index) => (
+
+ ))}
+
+ );
+}
+
+export { CardGrid, type CardGridProps };
diff --git a/src/components/news/CardGridSkeleton.tsx b/src/components/news/CardGridSkeleton.tsx
new file mode 100644
index 0000000..d5e6b0a
--- /dev/null
+++ b/src/components/news/CardGridSkeleton.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { cx } from '@/lib/utils';
+
+import { Skeleton } from '@/components/ui/Skeleton';
+
+function CardGridSkeleton() {
+ return (
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+ ))}
+
+ );
+}
+
+export { CardGridSkeleton };
diff --git a/src/components/news/InternalBadge.tsx b/src/components/news/InternalBadge.tsx
index 5780270..98a5303 100644
--- a/src/components/news/InternalBadge.tsx
+++ b/src/components/news/InternalBadge.tsx
@@ -1,4 +1,5 @@
import { ShieldAlert } from 'lucide-react';
+import { useTranslations } from 'next-intl';
import { cx } from '@/lib/utils';
@@ -13,12 +14,10 @@ import {
type InternalBadgeProps = {
className?: string;
internal: boolean;
- t: {
- internalArticle: string;
- };
};
-function InternalBadge({ className, internal, t }: InternalBadgeProps) {
+function InternalBadge({ className, internal }: InternalBadgeProps) {
+ const t = useTranslations('news');
if (!internal) return null;
return (
@@ -39,7 +38,7 @@ function InternalBadge({ className, internal, t }: InternalBadgeProps) {
- {t.internalArticle}
+ {t('internalArticle')}
diff --git a/src/components/news/ItemGrid.tsx b/src/components/news/ItemGrid.tsx
new file mode 100644
index 0000000..2a8a359
--- /dev/null
+++ b/src/components/news/ItemGrid.tsx
@@ -0,0 +1,32 @@
+import { articleMockData as articleData } from '@/mock-data/article';
+
+import { ArticleItem } from '@/components/news/ArticleItem';
+
+type ItemGridProps = {
+ page: number;
+};
+
+function ItemGrid({ page }: ItemGridProps) {
+ const itemsDisplayedAsCards = 4;
+ const itemsPerPage = 6;
+
+ const start = (page - 1) * itemsPerPage + itemsDisplayedAsCards;
+ const end = start + itemsPerPage;
+ const currentData = articleData.slice(start, end);
+ return (
+
+ {currentData.map((data) => (
+
+ ))}
+
+ );
+}
+
+export { ItemGrid, type ItemGridProps };
diff --git a/src/components/news/ItemGridSkeleton.tsx b/src/components/news/ItemGridSkeleton.tsx
new file mode 100644
index 0000000..3f0b73e
--- /dev/null
+++ b/src/components/news/ItemGridSkeleton.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { ArticleItemSkeleton } from '@/components/news/ArticleItemSkeleton';
+
+function ItemGridSkeleton() {
+ return (
+
+ {Array.from({ length: 6 }).map((_, index) => (
+
+ ))}
+
+ );
+}
+
+export { ItemGridSkeleton };
diff --git a/src/components/news/NewsItemGrid.tsx b/src/components/news/NewsItemGrid.tsx
deleted file mode 100644
index 23e4616..0000000
--- a/src/components/news/NewsItemGrid.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-
-import { parseAsInteger, useQueryState } from 'nuqs';
-
-import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
-import { NewsItem } from '@/components/news/NewsItem';
-
-type NewsItemGridProps = {
- newsData: {
- id: number;
- internal: boolean;
- title: string;
- date: string;
- photoUrl: string;
- }[];
- t: {
- morePages: string;
- goToPreviousPage: string;
- goToNextPage: string;
- previous: string;
- next: string;
- page: string;
- internalArticle: string;
- };
-};
-
-function NewsItemGrid({ newsData, t }: NewsItemGridProps) {
- const itemsDisplayedAsCards = 4;
- const itemsPerPage = 6;
- const [page, setPage] = useQueryState(t.page, parseAsInteger.withDefault(1));
-
- const start = (page - 1) * itemsPerPage + itemsDisplayedAsCards;
- const end = start + itemsPerPage;
- const currentData = newsData.slice(start, end);
-
- const totalPages = Math.ceil(
- (newsData.length - itemsDisplayedAsCards) / itemsPerPage,
- );
-
- return (
- <>
-
- {currentData.map((data) => (
-
- ))}
-
-
-
- );
-}
-
-export { NewsItemGrid };
diff --git a/src/components/profile/AvatarIcon.tsx b/src/components/profile/AvatarIcon.tsx
new file mode 100644
index 0000000..8925682
--- /dev/null
+++ b/src/components/profile/AvatarIcon.tsx
@@ -0,0 +1,29 @@
+import Image from 'next/image';
+
+import { Avatar, AvatarFallback } from '@/components/ui/Avatar';
+
+type AvatarIconProps = {
+ className?: string;
+ photoUrl: string;
+ name: string;
+ initials: string;
+};
+
+function AvatarIcon({ className, photoUrl, name, initials }: AvatarIconProps) {
+ return (
+
+ {photoUrl && (
+
+ )}
+ {!photoUrl && {initials}}
+
+ );
+}
+
+export { AvatarIcon };
diff --git a/src/components/providers/IntlErrorProvider.tsx b/src/components/providers/IntlErrorProvider.tsx
index e554675..afead1f 100644
--- a/src/components/providers/IntlErrorProvider.tsx
+++ b/src/components/providers/IntlErrorProvider.tsx
@@ -1,12 +1,11 @@
import { NextIntlClientProvider, useMessages } from 'next-intl';
-import { type ReactNode } from 'react';
type Props = {
- children: ReactNode;
- params: { locale: string };
+ children: React.ReactNode;
+ locale: string;
};
-function IntlErrorProvider({ children, params: { locale } }: Props) {
+function IntlErrorProvider({ children, locale }: Props) {
const messages = useMessages();
return (
-
- {children}
-
+ {children}
);
}
diff --git a/src/components/providers/ThemeProvider.tsx b/src/components/providers/ThemeProvider.tsx
index 0ee14af..6c06483 100644
--- a/src/components/providers/ThemeProvider.tsx
+++ b/src/components/providers/ThemeProvider.tsx
@@ -1,9 +1,8 @@
'use client';
import { ThemeProvider } from 'next-themes';
-import { type ReactNode } from 'react';
-function NextThemeProvider({ children }: { children: ReactNode }) {
+function NextThemeProvider({ children }: { children: React.ReactNode }) {
return (
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarFallback = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback };
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..1a7582a
--- /dev/null
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { type VariantProps, cva, cx } from '@/lib/utils';
+
+const badgeVariants = cva({
+ base: 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+ variants: {
+ variant: {
+ default:
+ 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+ secondary:
+ 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ destructive:
+ 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+ outline: 'text-foreground',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+});
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ );
+}
+
+export { Badge, badgeVariants };
diff --git a/src/design/Field.tsx b/src/design/Field.tsx
index 698172b..dc152d2 100644
--- a/src/design/Field.tsx
+++ b/src/design/Field.tsx
@@ -1,5 +1,5 @@
import { Eye, EyeOff } from 'lucide-react';
-import React, { useState } from 'react';
+import * as React from 'react';
import { cx } from '@/lib/utils';
@@ -57,7 +57,7 @@ const Field: React.FC = ({
id,
onClick,
}) => {
- const [showPassword, setShowPassword] = useState(false);
+ const [showPassword, setShowPassword] = React.useState(false);
const _onChange = (event: React.ChangeEvent) => {
if (onChange) {
diff --git a/src/design/TypeWriter.tsx b/src/design/TypeWriter.tsx
index d561d08..1a634e9 100644
--- a/src/design/TypeWriter.tsx
+++ b/src/design/TypeWriter.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
// TypeWriter Interface
interface TypeWriterProps {
@@ -9,10 +9,10 @@ interface TypeWriterProps {
// TypeWriter Function: Renders text as if it is being written out.
const TypeWriter: React.FC = ({ className, text, delay }) => {
- const [currentText, setCurrentText] = useState('');
- const [currentIndex, setCurrentIndex] = useState(0);
+ const [currentText, setCurrentText] = React.useState('');
+ const [currentIndex, setCurrentIndex] = React.useState(0);
- useEffect(() => {
+ React.useEffect(() => {
if (currentIndex < text.length) {
const timeout = setTimeout(() => {
setCurrentText((prevText) => prevText + text[currentIndex]);
diff --git a/src/lib/config.ts b/src/lib/config.ts
index e6aca37..fe6993f 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -22,9 +22,9 @@ const pathnames = {
en: '/news/new',
no: '/nyheter/ny',
},
- '/news/[articleId]': {
- en: '/news/[articleId]',
- no: '/nyheter/[articleId]',
+ '/news/[article]': {
+ en: '/news/[article]',
+ no: '/nyheter/[article]',
},
'/about': {
en: '/about',
diff --git a/src/mock-data/article.ts b/src/mock-data/article.ts
new file mode 100644
index 0000000..74f69c9
--- /dev/null
+++ b/src/mock-data/article.ts
@@ -0,0 +1,184 @@
+const articleMockData = [
+ {
+ id: 1,
+ internal: true,
+ title: 'Gruppe status: prosjekt spill',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ content:
+ 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis aut perferendis a, deleniti accusantium amet sunt autem eligendi repellat soluta omnis, nisi quam at vero perspiciatis. Ex repellendus saepe excepturi. Quam repellendus culpa quia facilis, exercitationem ipsa voluptatem nostrum aut libero labore quisquam est sed odio modi, eius quaerat tenetur deserunt facere officiis odit quibusdam consequuntur, rem vel similique? Nesciunt. Possimus libero ab suscipit enim quia. Error rerum architecto quidem ad voluptates distinctio minima tempore vel veniam esse ipsum officia atque, voluptatem molestias magni corrupti ducimus, placeat sint blanditiis praesentium? Cumque dignissimos totam pariatur repellat quod, vitae alias nostrum! Porro sequi mollitia blanditiis nulla accusantium fugiat explicabo! Soluta rerum debitis voluptates. Esse asperiores soluta facere fuga? Quas facilis nam inventore! Reiciendis tempora autem commodi dolor in doloremque eius a veritatis doloribus aliquid. Animi ipsam voluptatum sequi, eveniet placeat laboriosam iure, ullam ex odio reiciendis dicta enim libero, cupiditate et? Non. Quis ut eos, quod laboriosam suscipit exercitationem ratione incidunt blanditiis animi veritatis. Quos possimus exercitationem dolor inventore, esse ipsum, quod placeat provident officia et ab nihil? Modi impedit soluta eveniet. Sit qui cupiditate mollitia corrupti, sapiente neque enim vel praesentium veritatis voluptatibus? Laudantium sit nulla assumenda! Esse obcaecati sint dolores quos dolorum aliquam cum excepturi autem ad, fuga culpa veritatis! Quo nisi accusantium voluptatibus ipsam quia, ratione consectetur cupiditate adipisci sequi, nobis ab animi dolorem hic. Voluptates repellat ut molestias harum eos illo, odio sapiente doloribus, minima quidem, reprehenderit eum. Optio ut repellendus repudiandae at odit! Voluptates quidem eos perferendis amet veritatis quo excepturi fuga ipsa sunt quod facilis saepe, libero ea, neque cupiditate. Sint inventore laudantium error? Consectetur, porro. Laborum id assumenda, repellat ipsam cupiditate dolorum provident quod nostrum beatae a praesentium sequi animi corporis consequuntur. Atque inventore porro eum vitae? Architecto, officiis fugit tempora deserunt temporibus totam tenetur!',
+ },
+ {
+ id: 2,
+ internal: false,
+ title: 'DevOps Møtet',
+ date: '69. oktober 6969',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ },
+ {
+ id: 3,
+ internal: false,
+ title: 'Jonas er kul',
+ date: '42. november 2023',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ },
+ {
+ id: 4,
+ internal: true,
+ title: 'Iskrem er godt',
+ date: '18. februar 1942',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ },
+ {
+ id: 5,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ },
+ {
+ id: 6,
+ internal: true,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ },
+ {
+ id: 7,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ },
+ {
+ id: 8,
+ internal: false,
+ title: 'Dette er en veeeeldig lang overskrift som skal testes',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ views: 420,
+ },
+ {
+ id: 9,
+ internal: true,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 10,
+ internal: true,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 11,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 12,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 13,
+ internal: true,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 14,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 15,
+ internal: true,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 16,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 17,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 18,
+ internal: false,
+ title: '18',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+
+ {
+ id: 19,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 20,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 21,
+ internal: false,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 22,
+ internal: true,
+ title: 'Hvorfor er jeg her?',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+ {
+ id: 23,
+ internal: false,
+ title: '23',
+ date: '22. oktober 2023',
+ photoUrl: 'mock.jpg',
+ },
+];
+
+const authorMockData = [
+ {
+ name: 'Michael Jackson',
+ initials: 'MJ',
+ photoUrl: 'authorMock.jpg',
+ },
+];
+
+export { articleMockData, authorMockData };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 44fc8ce..7e5b270 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,9 @@
+import tailwindScrollbar from 'tailwind-scrollbar';
import { type Config } from 'tailwindcss';
+import tailwindAnimate from 'tailwindcss-animate';
import { fontFamily } from 'tailwindcss/defaultTheme';
-export default {
+const config = {
content: ['./src/**/*.tsx'],
darkMode: 'class',
theme: {
@@ -69,9 +71,7 @@ export default {
},
},
},
- plugins: [
- require('tailwindcss-animate'),
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-var-requires
- require('tailwind-scrollbar')({ nocompatible: true }),
- ],
+ plugins: [tailwindAnimate, tailwindScrollbar({ nocompatible: true })],
} satisfies Config;
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
index c5eef6e..26da54a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,8 +26,8 @@
/* Path Aliases */
"baseUrl": ".",
"paths": {
- "@/*": ["./src/*"]
- }
+ "@/*": ["./src/*"],
+ },
},
"include": [
".eslintrc.cjs",
@@ -36,7 +36,7 @@
"**/*.tsx",
"**/*.cjs",
"**/*.js",
- ".next/types/**/*.ts"
+ ".next/types/**/*.ts",
],
- "exclude": ["node_modules"]
+ "exclude": ["node_modules"],
}