semantic-ui-react#Container TypeScript Examples

Home: VFC = () => (
  <>
    <Helmet>
      <title>作品紹介 | SLAM DUNK</title>
    </Helmet>
    <header>
      <h1>『SLAM DUNK』作品紹介</h1>
    </header>
    <Container className="summary">
      <p>
        神奈川県立湘北高校に入学した赤い髪の不良少年である桜木花道は、中学時代に50人の女性から振られ続けたうえに、最後に振られた女性が「バスケ部の小田君」に好意を持っていたため、バスケットボールが大嫌いになっていた。
      </p>
      <p>
        しかし、廊下で自身に声をかけてきた赤木晴子に自身の長身と筋肉、身体能力の高さを見出された花道は、彼女にバスケット部への入部を薦められる。花道は晴子に一目惚れし、バスケットボールは全くの初心者であるにもかかわらず、彼女目当てに入部。その後、地道な練習や試合を通じて徐々にバスケットの面白さに目覚め、その才能の芽を急速に開花させる。湘北バスケ部には、監督である安西光義のもと、晴子の兄でもある主将の赤木剛憲と副主将の木暮公延らに加え、スーパールーキーといわれる流川楓らが加入。さらに、前年度のインターハイ県予選ベスト4である陵南高校との練習試合後には、暴力事件を起こして入院をしていた宮城リョータや、バスケ部から離れていた三井寿も復帰する。
      </p>
      <p>
        夏のインターハイ制覇を目指す湘北は緒戦で前年度のインターハイ県予選ベスト8である三浦台高校を破ると、その後も神奈川県予選を順調に勝ち進み、決勝リーグへの進出を懸けてインターハイ常連校の翔陽高校と対戦し勝利する。続く決勝リーグの初戦で前年度までに過去16年連続インターハイ出場を果たしている強豪校の海南大附属高校と激戦を繰り広げるも、惜敗。しかし、2戦目で前年度のインターハイ県予選ベスト4である武里高校に勝利すると、3戦目では宿敵の陵南を破り準優勝。優勝した海南大附属とともにインターハイ出場を果たす。
      </p>
      <p>
        広島県で行われるインターハイのトーナメント1回戦で、湘北は大阪府代表校の豊玉高校と対戦し、勝利。2回戦では、前年度までのインターハイで3連覇を果たした秋田県代表校の山王工業高校と対戦する。一時は20点以上の差をつけられるが、驚異的な粘りで反撃する。花道は負傷した背中の痛みに耐えながらプレーを続け、試合終了間際のジャンプシュートによる決勝点で湘北を逆転勝利に導く。しかし、全てを出し切った湘北は、続く3回戦で愛知県代表校の愛和学院高校との対戦で、ウソのようにボロ負けした。
        インターハイ後、3年生は赤木と木暮が引退し、三井のみ残留。新キャプテンにリョータが就任し、晴子を新たにマネージャーとして迎えるなど、チームは冬の選抜に向けて、新体制となる。流川は全日本ジュニアの代表に選ばれ、花道はリハビリを続けながら再びコートに立てる時を待つ。
      </p>
    </Container>
    <SchoolList />
  </>
)

ColorfulBeads: VFC<{ count?: number }> = ({ count = 0 }) => (
  <Container className="beads-box">
    {range(count).map((n: number) => (
      <Label circular color={colors[n % colors.length]} key={n} />
    ))}
  </Container>
)

function EventInfoModal({instanceId, image, hasDetails, leaderboard}: EventInfoModalProps) {
	const [eventData, setEventData] = React.useState(null);

	React.useEffect(() => {
		async function fetchEventData() {
			if (hasDetails) {
				const fetchResp = await fetch(`/structured/events/${instanceId}.json`);
				const data = await fetchResp.json();
				setEventData(data);
			}
		}

		fetchEventData();
	}, []);

	const eventInfoPanes = [
		{
			menuItem: 'Event Information',
			render: () => (
				<Tab.Pane attached={false}>
					<EventInformationTab eventData={eventData} />
				</Tab.Pane>
			),
		},
		{
			menuItem: 'Threshold Rewards',
			render: () => (
				<Tab.Pane attached={false}>
					<ThresholdRewardsTab eventData={eventData} />
				</Tab.Pane>
			),
		},
		{
			menuItem: 'Ranked Rewards',
			render: () => (
				<Tab.Pane attached={false}>
					<RankedRewardsTab eventData={eventData} />
				</Tab.Pane>
			),
		},
	];

	const leaderboardPane = [
		{
			menuItem: 'Leaderboard',
			render: () => (
				<Tab.Pane attached={false}>
					<LeaderboardTab leaderboard={leaderboard} />
				</Tab.Pane>
			),
		},
	];

	let panes;
	if (hasDetails && eventData) {
		panes = eventInfoPanes.concat(leaderboardPane);
	} else {
		panes = leaderboardPane;
	}

	return (
		<Container style={{ padding: '1em' }}>
			<Image
				src={`${process.env.GATSBY_ASSETS_URL}${image}`}
				fluid
			/>
			<Tab
				style={{marginTop: '1em'}}
				menu={{secondary: true, pointing: true}}
				panes={panes}
				renderActiveOnly
			/>
		</Container>
	);
}

MainContent = ({ children, narrowLayout }) =>
	narrowLayout ? (
		<Container text style={{ marginTop: '4em', paddingBottom: '2em', marginBottom: '2em' }}>{children}</Container>
	) : (
		<Container style={{ marginTop: '4em', marginBottom: '2em' }}>{children}</Container>
	)

useMainMenuItems = (verticalLayout: boolean) => {
	const createSubMenu = (title, children) => {
		const menuKey = title.toLowerCase().replace(/[^a-z0-9_]/g, '');
		if (verticalLayout) {
			return (
				<Menu.Item key={`/${menuKey}`}>
					<Menu.Header>{title}</Menu.Header>
					<Menu.Menu>
						{children.map(item => (
							<Menu.Item key={`${menuKey}${item.link}`} onClick={() => navigate(item.link)}>
								{item.title}
							</Menu.Item>
						))}
					</Menu.Menu>
				</Menu.Item>
			);
		} else {
			return (
				<Dropdown key={`/${menuKey}`} item simple text={title}>
					<Dropdown.Menu>
						{children.map(item => (
							<Dropdown.Item key={`${menuKey}${item.link}`} onClick={() => navigate(item.link)}>
								{item.title}
							</Dropdown.Item>
						))}
					</Dropdown.Menu>
				</Dropdown>
			);
		}
	};

	let items = [
		<Menu.Item key='/' onClick={() => navigate('/')}>
			Crew stats
		</Menu.Item>,
		<Menu.Item key='/behold' onClick={() => navigate('/behold')}>
			Behold
		</Menu.Item>
	];

	items.push(createSubMenu('Player tools', Object.entries(playerTools).map(([key, value]) => ({
			title: value.title,
			link: `/playertools?tool=${key}`
		})))
	);

	const pages = [
		{ title: 'Events', link: '/events' },
		{ title: 'Collections', link: '/collections' },
		{ title: 'Items', link: '/items' },
		{ title: 'Misc stats', link: '/stats' },
		{ title: 'Episodes', link: '/episodes' },
		{ title: 'Hall of Fame', link: '/hall_of_fame' },
		{ title: 'Worfle', link: '/crewchallenge' }
	];
	items.push(createSubMenu('Pages', pages));

	items.push(<Menu.Item key='bigbook' onClick={() => navigate('https://bigbook.app')}>Big book</Menu.Item>);

	const about = [
		{ title: 'About DataCore', link: '/about' },
		{ title: 'Announcements', link: '/announcements' }
	];
	// Show other markdowns as discovered by Gatsby in About menu
	const otherPages = useOtherPages();
	otherPages.map((page) => {
		about.push(
			{ title: page.title, link: page.slug }
		);
	});
	items.push(createSubMenu('About', about));

	if (verticalLayout) {
		return items;
	} else {
		return <Container>{items}</Container>;
	}
}

render() {
		let res = [];
		this.props.data.crewpages.edges.forEach((element, idx) => {
			let crewEntry = this.props.data.allCrewJson.edges.find(e => e.node.symbol === element.node.fields.slug.replace(/\//g, ''));

			if (crewEntry && crewEntry.node.max_rarity > 3)
			{
				res.push({
					name: crewEntry.node.name,
					tier: element.node.frontmatter.bigbook_tier,
					rarity: crewEntry.node.max_rarity,
					elem: <BigBookCrew key={idx} markdownRemark={element.node} crew={crewEntry.node} />
				});
			}
		});

		let sections = [];
		this.props.data.sections.edges.forEach((element, idx) => {
			sections.push({
				bigbook_section: element.node.frontmatter.bigbook_section,
				elem: (
					<div key={idx}>
						<Header as='h2' style={{ paddingTop: '1em' }}>
							{element.node.frontmatter.title}
						</Header>
						<div dangerouslySetInnerHTML={{ __html: element.node.html }} />
					</div>
				)
			});
		});

		sections = sections.sort(fieldSorter(['bigbook_section']));

		res = res.sort(fieldSorter(['-rarity', 'tier', 'name']));

		const groupByTiers = (rarity, title) => {
			let actualres = [];
			let section = [];
			res
				.filter(e => e.rarity === rarity)
				.forEach(element => {
					if (section.length === 0 || section[0].tier !== element.tier) {
						if (section.length > 0) {
							actualres.push(<BigBookMobilSection section={section} title={`${title} - Tier ${formatTierLabel(section[0].tier)}`} />);
						}
						section = [element];
					} else {
						section.push(element);
					}
				});
			actualres.push(<BigBookMobilSection section={section} title={`${title} - Tier ${formatTierLabel(section[0].tier)}`} />);
			return actualres;
		};

		let groups5 = groupByTiers(5, 'Legendary (5 star)');
		let groups4 = groupByTiers(4, 'Super rare (4 star)');

		return (
			<Container text>
				{sections[0].elem}
				{groups5}

				{sections[1].elem}
				{groups4}

				{sections.slice(2).map(e => e.elem)}
			</Container>
		);
	}

function EventsPage() {
	const [eventsData, setEventsData] = React.useState<EventInstance[]>([]);
	const [leaderboardData, setLeaderboardData] = React.useState(null);
	const [loadingError, setLoadingError] = React.useState(null);
	const [modalEventInstance, setModalEventInstance] = React.useState(null);

	// load the events and leaderboard data once on component mount
	React.useEffect(() => {
		async function loadData() {
			try {
				const fetchEventResp = await fetch('/structured/event_instances.json')
				const eventDataList = await fetchEventResp.json();
				setEventsData(eventDataList.reverse());

				const fetchLeaderboardResp = await fetch('/structured/event_leaderboards.json');
				const leaderboardDataList = await fetchLeaderboardResp.json();
				const keyedLeaderboard = {};
				leaderboardDataList.forEach(entry => keyedLeaderboard[entry.instance_id] = entry);
				setLeaderboardData(keyedLeaderboard);
			}
			catch (e) {
				setLoadingError(e);
			}
		}

		loadData();
	}, []);

	return (
		<Layout>
			<Container style={{ paddingTop: '4em', paddingBottom: '2em' }}>
				<Header as='h2'>Events</Header>
				{loadingError && (
					<Message negative>
						<Message.Header>Unable to load event information</Message.Header>
						<pre>{loadingError.toString()}</pre>
					</Message>
				)}
				<Grid stackable columns={3}>
					{eventsData.map(eventInfo => (
						<Grid.Column key={eventInfo.instance_id}>
							<div
								style={{ cursor: 'pointer' }}
								onClick={() => setModalEventInstance(eventInfo)}
							>
								<Segment padded>
									<Label attached="bottom">
										{eventInfo.event_name}
									</Label>
									<LazyImage
										src={`${process.env.GATSBY_ASSETS_URL}${eventInfo.image}`}
										size="large"
										onError={e => e.target.style.visibility = 'hidden'}
									/>
								</Segment>
							</div>
						</Grid.Column>
					))}
				</Grid>
				{modalEventInstance !== null && (
					<Modal
						open
						size="large"
						onClose={() => setModalEventInstance(null)}
						closeIcon
					>
						<Modal.Header>{modalEventInstance.event_name}</Modal.Header>
						<Modal.Content scrolling>
							<EventInfoModal
								instanceId={modalEventInstance.instance_id}
								image={modalEventInstance.image}
								hasDetails={modalEventInstance.event_details}
								leaderboard={leaderboardData[modalEventInstance.instance_id].leaderboard}
							/>
						</Modal.Content>
					</Modal>
				)}
			</Container>
		</Layout>
	);
}