Merge branch 'fe/feat/61-Header' into 'fe/develop'
Feat : Header 컴포넌트 ui 구현 - S11P21S002-61 See merge request s11-s-project/S11P21S002!6
This commit is contained in:
commit
b59f86740d
3
frontend/src/assets/icons/bell.svg
Normal file
3
frontend/src/assets/icons/bell.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 2C7.79 2 6 3.79 6 6V8C6 10.34 4.34 12 2 12H18C15.66 12 14 10.34 14 8V6C14 3.79 12.21 2 10 2ZM2 14H18V16H2V14ZM12 18H8V16H12V18Z" fill="currentColor"/>
|
||||
</svg>
|
After Width: | Height: | Size: 269 B |
3
frontend/src/assets/icons/user.svg
Normal file
3
frontend/src/assets/icons/user.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 2C8.34 2 7 3.34 7 5C7 6.66 8.34 8 10 8C11.66 8 13 6.66 13 5C13 3.34 11.66 2 10 2ZM10 10C7.79 10 5.67 10.79 4 12.07V14H16V12.07C14.33 10.79 12.21 10 10 10Z" fill="currentColor"/>
|
||||
</svg>
|
After Width: | Height: | Size: 296 B |
12
frontend/src/components/Header/index.stories.tsx
Normal file
12
frontend/src/components/Header/index.stories.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import Header from './index';
|
||||
|
||||
const meta: Meta<typeof Header> = {
|
||||
title: 'Components/Header',
|
||||
component: Header,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Header>;
|
||||
|
||||
export const Default: Story = {};
|
48
frontend/src/components/Header/index.tsx
Normal file
48
frontend/src/components/Header/index.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import bellIcon from '@/assets/icons/bell.svg';
|
||||
import userIcon from '@/assets/icons/user.svg';
|
||||
|
||||
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||
|
||||
export default function Header({ className, ...props }: HeaderProps) {
|
||||
return (
|
||||
<header
|
||||
className={cn(
|
||||
'flex h-16 w-full items-center justify-between border-b px-4 sm:px-6 md:px-8 lg:px-10',
|
||||
'bg-color-background-default-default border-color-border-default-default',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center gap-4 md:gap-10">
|
||||
<div
|
||||
className={cn('text-[20px] font-normal tracking-[-1.60px] text-black sm:text-[24px] md:text-[32px]')}
|
||||
style={{ fontFamily: "'Offside-Regular', Helvetica" }}
|
||||
>
|
||||
WorLabel
|
||||
</div>
|
||||
<nav className="items-center hidden gap-5 md:flex">
|
||||
<div className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}>
|
||||
workspace
|
||||
</div>
|
||||
<div className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}>
|
||||
labeling
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 md:gap-5">
|
||||
<img
|
||||
className="w-4 h-4 sm:h-5 sm:w-5"
|
||||
src={bellIcon}
|
||||
alt="Bell Icon"
|
||||
/>
|
||||
<img
|
||||
className="w-4 h-4 sm:h-5 sm:w-5"
|
||||
src={userIcon}
|
||||
alt="User Icon"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user