Feature/create group header

frontend/app/globals.css

@@ -20,6 +20,8 @@
     --accent-foreground: 222.2 47.4% 11.2%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
+    --success: 142 76.2% 36.3%;
+    --success-foreground: 0 0% 100%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
@@ -48,6 +50,8 @@
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
+    --success: 142 76.2% 36.3%;
+    --success-foreground: 0 0% 100%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;

frontend/components/groups/group-header.tsx

@@ -1,3 +1,120 @@
+import Link from 'next/link';
+import React from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+const group = {
+  id: 1,
+  name: 'Kir-Dev',
+  foundingYear: 2001,
+  isActive: true,
+  isSvieMember: false,
+  parent: 'Simonyi Károly Szakkollégium',
+  website: 'kir-dev.hu',
+  mailingList: '[email protected]',
+  leader: 'Bujdosó "Bohóc" Gergő',
+  description:
+    'A Szent Schönherz Senior Lovagrendben a BME Villamosmérnöki és Informatikai Karára kerülő elsősök nevelésével foglalkozunk. Figyelünk rájuk, segítjük a beilleszkedésüket az egyetemi életbe és koordináljuk a különböző közösségépítő és tanulmányi programokat (kirándulások, táborok, vacsorák, stb.). Lényeges részt vállalunk a kari Gólyatábor megszervezésében is. Szervezetünk fenti céljai mellett folyamatosan törekszünk tagjaink készségeinek fejlesztésére. Rendszeresen látogatunk és szervezünk tréningeket, csapatépítő táborokat, melyen karunk hallgatói vehetnek részt.',
+  members: [
+    {
+      name: 'Dr. Emma Kovács',
+      username: 'emma_k',
+      avatar: '/placeholder.svg?height=40&width=40',
+      currentRoles: ['Director', 'Professor'],
+      pastRoles: ['Researcher'],
+      joinDate: '2018.09.01',
+      statusUpdatedDate: '2023.01.15',
+      endDate: null,
+      status: 'active',
+    },
+    {
+      name: 'Máté Nagy',
+      username: 'mate_n',
+      avatar: '/placeholder.svg?height=40&width=40',
+      currentRoles: ['Rep', 'Coordinator'],
+      pastRoles: ['Intern'],
+      joinDate: '2020.03.15',
+      statusUpdatedDate: '2022.11.30',
+      endDate: null,
+      status: 'active',
+    },
+    {
+      name: 'Zsófia Tóth',
+      username: 'zsofia_t',
+      avatar: '/placeholder.svg?height=40&width=40',
+      currentRoles: ['Mentor', 'Facilitator'],
+      pastRoles: ['Speaker'],
+      joinDate: '2019.01.10',
+      statusUpdatedDate: '2023.06.22',
+      endDate: null,
+      status: 'passive',
+    },
+    {
+      name: 'Balázs Fekete',
+      username: 'balazs_f',
+      avatar: '/placeholder.svg?height=40&width=40',
+      currentRoles: ['Tech Lead', 'Researcher'],
+      pastRoles: ['Developer'],
+      joinDate: '2018.11.05',
+      statusUpdatedDate: '2023.03.01',
+      endDate: null,
+      status: 'active',
+    },
+    {
+      name: 'Eszter Varga',
+      username: 'eszter_v',
+      avatar: '/placeholder.svg?height=40&width=40',
+      currentRoles: ['Marketing', 'Social Media'],
+      pastRoles: ['Planner'],
+      joinDate: '2021.06.20',
+      statusUpdatedDate: '2023.09.10',
+      endDate: null,
+      status: 'passive',
+    },
+    {
+      name: 'Gábor Szilágyi',
+      username: 'gabor_s',
+      avatar: '/placeholder.svg?height=40&width=40',
+      currentRoles: ['Liaison', 'Advisor'],
+      pastRoles: ['Investor'],
+      joinDate: '2019.09.01',
+      statusUpdatedDate: '2023.12.31',
+      endDate: '2023.12.31',
+      status: 'archived',
+    },
+  ],
+};
+
 export function GroupHeader() {
-  return <>Group Header</>;
+  const historyUrl = `/groups/${group.id}/history`;
+  return (
+    <Card className='overflow-hidden shadow-lg max-w-7xl m-auto'>
+      <CardHeader className='p-6 sm:p-8 bg-gradient-to-r from-blue-500 to-purple-500'>
+        <div className='flex flex-col sm:flex-row items-center sm:items-start gap-6'>
+          <div className='text-center sm:text-left'>
+            <CardTitle className='text-3xl sm:text-4xl font-bold text-white mb-3 flex items-center gap-3'>
+              {group.name}
+              <Badge variant={group.isActive ? 'success' : 'destructive'} className='tracking-wide'>
+                {group.isActive ? 'Aktív' : 'Inaktív'}
+              </Badge>
+              <Badge variant={group.isSvieMember ? 'success' : 'destructive'} className='tracking-wide'>
+                {group.isSvieMember ? 'SVIE tag' : 'Nem SVIE tag'}
+              </Badge>
+            </CardTitle>
+            <p className='text-lg text-primary-foreground pb-7 text-justify'>{group.description}</p>
+            <CardDescription className='text-lg text-blue-100 flex flex-col sm:flex-row sm:items-center gap-6'>
+              <Button asChild variant='secondary'>
+                <Link href={historyUrl}>Jelentkezés</Link>
+              </Button>
+              <Button asChild variant='secondary'>
+                <Link href={historyUrl}>Történet</Link>
+              </Button>
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+    </Card>
+  );
 }

frontend/components/ui/avatar.tsx

@@ -1,50 +1,40 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarFallback, AvatarImage };

frontend/components/ui/badge.tsx

@@ -1,36 +1,30 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full 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",
+  'inline-flex items-center rounded-full 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 hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-success text-success-foreground hover:bg-success/80',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

frontend/tailwind.config.js

@@ -35,6 +35,10 @@ module.exports = {
           DEFAULT: 'hsl(var(--destructive))',
           foreground: 'hsl(var(--destructive-foreground))',
         },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
           foreground: 'hsl(var(--muted-foreground))',